Document Direct: direct transmission after signature by the server

JS client signature direct upload is not adopted because AccessKey ID and AcessKey Secret will be exposed in the front end page, so there are serious security risks. So search Ali cloud decided to use the server after signing direct transmission scheme.

One, function split

Video upload component el-upload:

<el-upload
          style="marginTop:-5px;"
          class="upload-demo"
          :action="ossParams.host || ''"
          :data="extraData"
          :before-upload="beforeUpload"
          :on-progress="handleUploadProgress"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :show-file-list="false"
          :disabled="uploadPercent > 0 && uploadPercent < 100"
          accept="video/*"
        >
          <el-button size="small" type="primary">{{ uploadPercent === 0 ? 'Click upload' : uploadPercent === 100? 'Re-upload' : 'Video uploaded, please wait... '}}</el-button>
          <div slot="tip" class="el-upload__tip">Supports all video files, and the maximum size is 1GB</div>
</el-upload>
Copy the code

Video upload progress bar el-progress:

<el-progress
          v-if="showPro"
          v-show="uploadPercent > 0"
          :percentage="uploadPercent"
          :color="customColorMethod"
></el-progress>
Copy the code

The video address displayed after the video is uploaded (replicable) :

 <el-form-item v-if="uploadPercent === 100">
      <span style="font-size:12px; font-weight:500">Video Address:</span>
      <el-link
        id="videoLink"
        :data-clipboard-text="' Ali Cloud OSS address '+ extraData. Key"
        type="info"
        @click="() => {this.$message.success(' copy video address successfully ')}"
        >{{' ali cloud OSS address '+ extraData. Key}}<i class="el-icon-document-copy el-icon--right"></i>
      </el-link>
    </el-form-item>
Copy the code

The effect is as follows:

Second, code details

1. The el-upload component

1) upload address: action = “ossParams. Host | |” “

It is mainly to obtain the encryption policy and signature of the upload ali cloud, and upload their own to the address of ali Cloud, of course, and their own Ali cloud Accessid.

2) Data =”extraData”

extraData: {
        key: ' '.policy: ' '.OSSAccessKeyId: ' '.success_action_status: '200'.// Make the server return 200, otherwise 204 is returned by default
        callback: ' '.signature: ' '
      }
Copy the code

Before upload :before-upload=”beforeUpload”

beforeUpload(file) {
      if (file.size > 1024 * 1024 * 1024) {
        this.$message.error('Upload video size cannot exceed 1G')
        return false
      }
      const expire = this.ossParams.expire * 1000
      if (expire < Date.now() - 1000 * 60) {
        this.$message.error('Token validity has expired, please refresh the page and try again')
        return false
      }
      this.uploadPercent = 0
      try {
        const { policy, accessid, dir, callback, signature } = this.ossParams
        const md5 = crypto.createHash('md5')
        const nameHash = md5
          .update(file.name.split('. ') [0] + new Date().getTime().toString())
          .digest('hex')
        this.extraData.key = dir + nameHash + get_suffix(file.name)
        this.extraData.policy = policy
        this.extraData.OSSAccessKeyId = accessid
        this.extraData.callback = callback
        this.extraData.signature = signature
        return true
      } catch (err) {
        console.log(err)
        this.$message.error(err.message)
        return false}},Copy the code

4) On-progress =”handleUploadProgress”

 handleUploadProgress(event) {
      this.uploadPercent = parseInt(event.percent)
    },
Copy the code

On-success =”handleUploadSuccess”

 handleUploadSuccess(response, file, fileList) {
      this.$message.success('Video uploaded successfully')
      this.$nextTick(() = > {
        const clipboard = new ClipboardJS('#videoLink')})console.log(response, file, fileList)
      this.uploadPercent === 100
        ? (this.showPro = false)
        : (this.showPro = true)},Copy the code

On-error =”handleUploadError”

 handleUploadError(err) {
      this.$message.error('Video upload failed' + err.toString())
      this.uploadPercent = 0
    },
Copy the code

1) Progress bar percentage dynamic change :color=”customColorMethod”

customColorMethod(percentage) {
      if (percentage < 30) {
        return '# 909399'
      } else if (percentage < 70) {
        return '#e6a23c'
      } else {
        return '#67c23a'}}Copy the code

Three, all the code