Upload pictures to qiniu cloud through the web call interface

Upload the domain name used ：

https://developer.qiniu.com/kodo/1671/region-endpoint-fq

Use node Generate upload credentials ：

https://developer.qiniu.com/kodo/1289/nodejs#5

const qiniu = require('qiniu')


// Get upload credentials 
const uploadGetToken = (req, res) => {
  const { accessKey, secretKey } = getQiNiuKey()
  const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
  const putPolicy = new qiniu.rs.PutPolicy({
    scope: 'xutongbao-video',
    returnBody: `{
      "code": 200,
      "data": {"key":"$(key)","hash":"$(etag)","fsize":$(fsize),"bucket":"$(bucket)","file":"$(fname)"},
      "message": " success "
    }`
  })

  const uploadToken = putPolicy.uploadToken(mac)

  res.send({
    code: 200,
    data: {
      token: uploadToken
    },
    message: ' success '
  })
}

encapsulation andt Upload components ：

import React from 'react'
import { Button, Upload, message } from 'antd'
import { v4 as uuidv4 } from 'uuid'
import {
  imageUrlFormat,
  uploadGetTokenFromLocalStorage,
} from '../../utils/tools'
import urls from '../../api/urls'

export default function UploadImgToCND({
  value = '',
  msg,
  type = 'add',
  onChange,
  accept = '*.*',
  imgUrlCnd,
}) {
  const imageUrl = imageUrlFormat(imgUrlCnd)
  let defaultValue = {
    uid: '-1',
    name: imageUrl,
    status: 'done',
    url: imageUrl,
  }

  const fileList = []
  if (value) {
    fileList.push(defaultValue)
  }

  const uploadProps = {
    name: 'file',
    action: urls.light.uploadToCDN,
    data: (file) => {
      const uid = uuidv4()
      const reslutIndex = Array.from(file.name).findLastIndex(item => item === '.')
      const fileName = uid + file.name.slice(reslutIndex, file.name.length)
      return {
        key: `img/${fileName}`,
        fname: fileName,
        token: uploadGetTokenFromLocalStorage(),
      }
    },
    headers: {},
    maxCount: 1,
    listType: 'picture',
    defaultFileList: [...fileList],
    accept,
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
        onChange(undefined)
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name}  Upload successful `)
        if (info.file.response.code === 200) {
          // console.log(info.file.xhr.responseURL)
          // const imgUrl = `${getHost(info.file.xhr.responseURL)}/${info.file.response.data.filename}`
          // console.log(imgUrl)
          onChange(info.file.response.data.key)
        }
      } else if (info.file.status === 'uploading') {
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name}  Upload failed `)
      }
    },
  }

  return (
    <span>
      {type !== 'check' ? (
        <Upload {...uploadProps}>
          <Button> To upload pictures </Button>
          <span className="m-upload-text">{msg}</span>
        </Upload>
      ) : (
        value && (
          <img
            src={imageUrl}
            alt={imageUrl}
            className="m-upload-img-check"
          ></img>
        )
      )}
    </span>
  )
}

Use components ：

      <Form.Item label=" Head portrait " name="avatar">
        <UploadImgToCND imgUrlCnd={initValues.avatarCnd}></UploadImgToCND>
      </Form.Item>
      <Form.Item label=" cover " name="coverImage">
        <UploadImgToCND imgUrlCnd={initValues.coverImageCnd}></UploadImgToCND>
      </Form.Item>

Link to the path of the picture cdn link ：

// Get encrypted picture links 
const getSecrecyImgUrl = (key) => {
  if (key) {
    const { accessKey, secretKey } = getQiNiuKey()
    const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
    const config = new qiniu.conf.Config()
    const bucketManager = new qiniu.rs.BucketManager(mac, config)
    //var privateBucketDomain = 'http://rewjm2mrh.hb-bkt.clouddn.com';
    const privateBucketDomain = 'http://cdn.xutongbao.top'
    const deadline = parseInt(Date.now() / 1000) + 3600 * 24 // 24 Hours expired 
    //const key = 'video/2.mp4'
    const privateDownloadUrl = bucketManager.privateDownloadUrl(
      privateBucketDomain,
      key,
      deadline
    )
    return privateDownloadUrl
  } else {
    return ''
  }
}

Call the interface of qiniu cloud when uploading , You need to bring token. The path links of pictures are saved in the database , Not seven cattle cloud cdn Picture links , When accessing the list, you need to turn the path link of the image into cdn Link to the front end . When the front end modifies the image, it still only modifies the path and link .