Recently, the company is working on a project, which is a video file uploading function. After discussing the technical solution at the front and back end, the function provided by Ali Cloud is adopted to realize it. The following is mainly the front-end code.

html

    <input type="file" @change="uploadVideo"> <! -- Progress bar --><el-progress :percentage="percentage"></el-progress>
Copy the code
uploadVideo(e){
    // Get the permission conditions for uploading files
   this.axios.get("/sts/token").then(res= > {
        let OSS = require("ali-oss");
        let client = new OSS({
          // yourRegion Fill in the Bucket region. For east China 1 (Hangzhou), set Region to OSS-CN-Hangzhou.
          region: "oss-cn-beijing".// Temporary access credentials from the STS service. Temporary access credentials include temporary access keys (AccessKeyId and AccessKeySecret) and security tokens (SecurityTokens).
          / / accessKeyId accessKeySecret, stsToken these three values is the back-end to return to you
          accessKeyId: res.Credentials.AccessKeyId,
          accessKeySecret: res.Credentials.AccessKeySecret,
          stsToken: res.Credentials.SecurityToken,
          // Enter the Bucket name.
          bucket: 'The back end guy will tell you.'
        });
        // let client = new OSS(ossConfig);
        let tempCheckpoint;
        async function multipartUpload() {
          try {
            // Enter the full path of Object and the full path of local files. Object the full path cannot contain a Bucket name.
            / / you can pass the custom file name (for example exampleobject. TXT) or directory (for example mytestdoc/exampleobject. TXT), in the form of implementation upload files to the Bucket or the Bucket in the specified directory.
            // If the local path is not specified, the file is uploaded from the local path of the sample program project by default.
            let result = await client.multipartUpload(
              'back-end storage location /${res.file_name}`,
              e.target.files[0] and {progress: function(p, checkpoint) {
                    //p is the upload progress returned
                  console.log(p);
                  that.percentage = parseInt(p * 100);
                  if (p == 1) {
                      // When p equals 1, the file has been uploaded. Send a request to the back end to tell the file has been uploaded
                    that.axios.post("/sts/token", {
                      file_name: res.file_name,
                      upload_status: "already_upload"  // This field negotiates between the front and back ends
                    });
                  }
                  // Breakpoint record point. After the browser is restarted, the upload cannot continue. You need to manually trigger the upload.tempCheckpoint = checkpoint; }}); }catch (e) {
            console.log(e);
          }
        }
        multipartUpload();
      });
}
Copy the code

The front-end code has been written, so written, when executed, will appear the following problem

The solution is to add a header to ali Cloud Settings to log in to the OSS management console

Click the Bucket list, and then click the target Bucket name.

Choose Permission Management > Cross-domain Settings, and click Settings in the Cross-domain Settings area.

Click Create rule and set cross-domain access parameters on the Set Cross-domain rule panel.

Expose Headers: Set it to ETag, X-OSs-request-id, or X-oss-version-id.

Set it up and you’re done.