Process:

1. Object storage function in the background of Seven Niuyun
2. Node.js generates qiuniuyun’s token in the background (or directly obtains it from the server). Please refer to the way to obtain nodeJS at the end

<template lang="pug">Upload-img. full(for="inputId") input(ref="upload-img");  id="inputId" type="file" :accept="uploadAccept" @change="handleFileChange" style="display: Img.local-photo-absolute (v-if="imgSrc" : SRC ="imgSrc") //- img.local-photo-absolute (v-if="imgSrc" : SRC ="imgSrc")</template>
Copy the code

import * as qiniu from 'qiniu-js'
export default {
  name: 'upload-img-to-qi-niu'.props: {
    uploadAccept : {
      type: String.default: 'image/png,image/gif,image/jpeg,image/jpg'}},data() {
    return {
      imgSrc: ' '}; },methods: {
    handleFileChange() {
      const { files } = this.$refs['upload-img']
      if(! files || ! files.length) {this.$toast('This image does not support uploading')
        return
      }
      const file = files[0]
      console.log('Image size:'+file.size)
      // if(file.size > 1024 * 1024 * 4) {
      // this.$toast(' Image size cannot exceed 4MB! ')
      // return
      // }
      const URL = window.URL || window.webkitURL;
      this.imgSrc = URL.createObjectURL(file) 

      const fileType = file.type
      console.log(fileType,'File type')
      
      if (this.uploadAccept.split(', ').findIndex(t= > t === fileType) === -1) {
        this.$toast('Please upload the correct image format')
        return
      }
        
      this.$emit('file-change', { imgSrc: this.imgSrc ,file })
    },
	
    // Provide external calls
    // file 
    uploadToQiNiu({ uid, sid, file}) {
      return new Promise((resolve, reject) = > {
        this.getQiNiuToken(uid, sid).then(({ token, domain }) = > {
          this.compressImg(file).then(dist= > {
            const observable = qiniu.upload(dist,Date.now() + file.name,token,
              {
                fname: ' '.params: {},
                mimeType: null
              },
              {
                useCdnDomain: true.region: qiniu.region.z0
              }
            )
            // Upload started
            observable.subscribe({
              complete(res) {
                resolve( domain + res.key)
              },
              error(err) {
                console.log('Upload error:'+err)
                reject(err.message)
              }
            })

          })
        })
      })
    },
	
    // Obtain the qiuniuyun token from the server
    getQiNiuToken (uid,sid) {
      return this.$req('xxx/xxx', { uid, sid },'POST').then(res= > res)
    },

    compressImg(file) {
      return new Promise((resolve,reject) = > {
        const options = {
          quality: 0.92.noCompressIfLarger: true.maxWidth: 1024.maxHeight: 1024
        }
        return qiniu.compressImage(file, options).then(data= > {
          console.log('Compressed image result:'+ data.dist)
          resolve(data.dist)
        }).catch((err) = > {
          console.log('Image compression error:'+ err)
          reject(err)
        })
      })
    },
  }
};
</script>
Copy the code

use

import uploadImgToQiNiu from '@/components/UploadImgToQiNiu'
Copy the code

Upload-box upload-img-to-Qi-niu (@file-change="onFileChange" ref="uploadComp"). Upload-desc Click upload imageCopy the code

onFileChange ({ file }) {
	this.file = file
},

// Upload file to qiniuyun for network address
getImgNetWorkUrl(file) {
  return this.$refs.uploadComp.uploadToQiNiu({ uid, id,file }).then(screenshot= > {
    return Promise.resolve(screenshot)
  })
},

onSummit () {
	this.getImgNetWorkUrl(this.file).then(url= > {
    	this.$req('xxx/uploda-url').then(() = >{})})}Copy the code

NodeJ generated token

1. Register 7 Niuyun and obtain the following three parameters in the personal center – “Secret Key”

// https://developer.qiniu.com/kodo/1289/nodejs
var accessKey = 'your access key';
var secretKey = 'your secret key';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var options = {
  scope: bucket,
};
var putPolicy = new qiniu.rs.PutPolicy(options);
varuploadToken=putPolicy.uploadToken(mac); Other self-inspectionCopy the code

inductive

1. Upload the image through the input file type and obtain the local URL path file of the image.
2. Generally, the server only stores the network address of the picture, so it is necessary to upload the local picture to Qiuniuyun first, exchange for the network address, and then transfer the network address to the server for storage, the specific steps are as follows;
3. When you click upload, you will obtain the token stored by Qiuniuyun through the server, and then call the API provided by Qiuniuyun to upload pictures in exchange for the network address