1. Introduce the OSS package

Install the dependency package: NPM install ali-ossCopy the code
import OSS from 'ali-oss';
import SparkMD5 from 'spark-md5'
Copy the code

2. Basic configuration of OSS

$ue.prototype.$oss=new oss ({// yourRegion specifies the region where the Bucket is located. Take East China 1 (Hangzhou) as an example, set Region to OSS-CN-Hangzhou. Region: 'oss-cn-hangzhou', // temporary AccessKey (AccessKey ID and AccessKey Secret) obtained from the STS service. AccessKeyId: '12345678', accessKeySecret: 'abcdefg', // SecurityToken obtained from STS service. // stsToken: 'yourSecurityToken', // Fill in the Bucket name. bucket: 'alibi' }); $sparkMD5 = new SparkMD5.arrayBuffer (); $sparkMD5 = new SparkMD5.arrayBuffer ();Copy the code

3. Upload the HTML

1. Upload h5

<el-upload ref="uploadimg" action="" :auto-upload="false" :http-request="ossupload" :on-change="handleChange"></el-upload>
Copy the code

2. Upload interface and file information processing js before upload

// Upload interface call async ossupload() {let obj = "/ TVDSP /webupload/" + this.filename; await this.$oss.put(obj, this.file).then((r1) => { console.log(r1); this.form.license = r1.url; }) .catch(function(err) { this.$message.error(err); }); },Copy the code
HandleChange (file) {return new Promise((resolve) => {let reader = new) {return new Promise((resolve) => {let reader = new) FileReader(); Reader. Onload = (event) => {//md5 encryption file name let spark = this.$sparkMD5.append(event.target.result); let md5 = spark.end(); let imgtype = file.name.substr(file.name.lastIndexOf(".")); This. filename = md5 + imgType; $refs.uploadimg.submit(); $refs.uploadimg.submit(); $refs.uploadimg.submit(); $refs.uploadimg.submit(); }; reader.readAsDataURL(file.raw); }); },Copy the code

3. Return result:

4. Several problems encountered:

1. Cross-domain problems

Solution: Set cross-domain access for Aliyun OSS

OSS provides the HTML5 protocol for cross-domain resource sharing CORS Settings to help you achieve cross-domain access. When the OSS receives a cross-domain request (or an OPTIONS request), it reads the CORS rules corresponding to the storage space and then checks the permissions accordingly. OSS checks each rule in turn, using the first matching rule to allow the request and return the corresponding header. If all rules fail to match, no CORS related headers are attached.

  • The OSS management console page is displayed.

  • In the storage space list on the left, click the storage space name. The storage space overview page is displayed.

  • Click the Basic Settings TAB, locate the cross-domain Settings area, and click Settings.

  • Click Create Rule to open the dialog box for setting cross-domain rules.

  • Set cross-domain rules.

  • Source: Specifies the source from which cross-domain requests are allowed. Multiple matching rules are allowed with carriage return intervals. A maximum of one wildcard “*” is allowed for each matching rule.

  • Allowed Methods: Specifies allowed cross-domain request Methods.

  • Allowed Headers: Specifies the header allowed for cross-domain requests. Multiple matching rules are allowed with carriage return intervals. Each matching rule uses at most one wildcard “*”.

  • Expose Headers: Specifies the response Headers (such as a Javascript XMLHttpRequest object) that the user is allowed to access from within the application.

  • Cache Time: Specifies the cache time of the browser’s prefetch (OPTIONS) request for a specific resource.

Note: A maximum of 10 rules can be configured for each storage space.

  • Click OK.

2. InvalidPartError400 error

Solution: Add Etag to exposed Headers when setting cross-domain access for Aliyun OSS

3. RequestError: XHR error (req “error”), POST xxx.xxx/uploa…… …

Solution: Add Secure :true to the configuration

Var client = new oss. Wrapper({region: 'oss-cn-hanghzou', secure:true,//* This is important ！！！！！！！！！ accessKeyId : 'xxx', accessKeySecret : 'xxx', bucket : 'xxx' });Copy the code