前端圖片上傳七牛雲

1.圖片上傳到七牛雲，必須要注冊登錄七牛雲賬號，然后在上面創建一個空間。

2.為了實現上傳，必須要有一個域名，這里使用CDN測試域名。然后在“密鑰管理”獲取AccessKey和SecretKey，記住自己命名空間。

獲取AccessKey和SecretKey

3.使用七牛雲提供的接口實現數據上傳
<script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>

4.通過提供的AccessKey和SecretKey，BUCKET就是自己的命名空間，生成token。

點擊查看代碼

const getQiniuToken = (req, res) => {
  const mac = new qiniu.auth.digest.Mac(ACCESS_KEY, SECRET_KEY)
  const options = {
    scope: BUCKET
  }
  const putPolicy = new qiniu.rs.PutPolicy(options)
  const token = putPolicy.uploadToken(mac)
  return res.json({
    code: 200,
    data: token,
    msg: 'success'
  })
}

5.通過生成的token，便可以將數據發送到自己的七牛雲空間，實現發送過程。

點擊查看代碼

uploadQiniu(e) {
      const guid = genGuid()
      const [file] = e.target.files
      typeof this.getLocalUrl === 'function' && this.createObjetURL(file, guid)

      const fileType = file.type && file.type.split("/")[1]
      const fileSize = file.size / 1024 / 1024
      if (fileSize > 1) {
        this.$message.error('只能上傳小於1M的圖片！換一個小圖片試試吧~~')
        return
      }
      const putExtra = {
        fname: "",
        params: "",
        mineType: ["image/png", "image/jpeg", "image/gif"]
      }
      const config = {
        useCdnDomain: true
      }
      const error = (err) => {
        this.getStatus({status: uploadImgStatusMap.error, data: err, guid})
      }
      const next = (res) => {
        this.getStatus({status: uploadImgStatusMap.next, data: res, guid})
      }
      const complete = (res) => {
        console.log(res)
        this.getStatus({status: uploadImgStatusMap.complete, data: res, guid})
      }
      const subObject = {
        next,
        error,
        complete
      }
      const imgName = imgRandomName() + '.' + fileType
      const observable = window.qiniu.upload(file, imgName, this.token, putExtra, config)
      const subScription = observable.subscribe(subObject)
      console.log(subScription)
    },