阿里云oss上传方法实战经验

3,114 阅读2分钟

1.引入oss包

安装依赖包 : npm install ali-oss     
import OSS from 'ali-oss';
import SparkMD5 from 'spark-md5'

2.oss基础配置

Vue.prototype.$oss=new OSS({
   // yourRegion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
   region: 'oss-cn-hangzhou',
   // 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
   accessKeyId: '12345678',
   accessKeySecret: 'abcdefg',
   // 从STS服务获取的安全令牌(SecurityToken)。
   // stsToken: 'yourSecurityToken',
   // 填写Bucket名称。
   bucket: 'alibi'
});
 //编译上传文件名工具
Vue.prototype.$sparkMD5 = new SparkMD5.ArrayBuffer();

3.上传html

1. 上传h5

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

2.上传接口和上传前的文件信息处理js

    //上传接口调用
    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);
      });
    },
//上传前的数据异步加密处理
//该函数处理有个bug问题就是上传前和成功该函数都会被调用一遍
handleChange(file) {
   return new Promise((resolve) => {
       let reader = new FileReader();
     reader.onload = (event) => {
       //md5加密文件名
        let spark = this.$sparkMD5.append(event.target.result);
        let md5 = spark.end();
        let imgtype = file.name.substr(file.name.lastIndexOf("."));
        //文件名规范
        this.filename = md5 + imgtype;
        //手动调用上传接口,因为异步处理,无法调用element框架的before-upload函数处理
        this.$refs.uploadimg.submit();            
       };
     reader.readAsDataURL(file.raw);
  });
},

3. 返回结果:

截屏2021-07-23 下午5.45.47.png

4. 遇到的几个问题:

1. 跨域问题

截屏2021-07-23 下午5.45.56.png

解决办法:阿里云oss设置跨域访问

OSS 提供 HTML5 协议中的跨域资源共享 CORS 设置,帮助您实现跨域访问。当 OSS 收到一个跨域请求(或者 OPTIONS 请求)时,会读取存储空间对应的 CORS 规则,然后进行相应的权限检查。OSS 会依次检查每一条规则,使用第一条匹配的规则来允许请求并返回对应的 header。如果所有规则都匹配失败,则不附加任何 CORS 相关的 header。

  • 进入 OSS 管理控制台 界面。

  • 在左侧存储空间列表中,单击目标存储空间名称,打开该存储空间概览页面。

  • 单击 基础设置 页签,找到 跨域设置 区域,然后单击 设置。

  • 单击 创建规则,打开 设定跨域规则 对话框。

  • 设置跨域规则。

  • 来源:指定允许的跨域请求的来源。允许多条匹配规则,以回车为间隔。每个匹配规则允许使用最多一个“*”通配符。

  • 允许 Methods:指定允许的跨域请求方法。

  • 允许 Headers:指定允许的跨域请求 header。允许多条匹配规则,以回车为间隔。每个匹配规则使用最多一个“*”通配符。

  • 暴露 Headers:指定允许用户从应用程序中访问的响应头(例如一个 Javascript 的 XMLHttpRequest 对象)。

  • 缓存时间:指定浏览器对特定资源的预取(OPTIONS)请求返回结果的缓存时间。

说明: 每个存储空间最多可以配置 10 条规则。

  • 单击 确定。

aHR0cDovL3d3dy56amh1aXdhbi5jbi9ibG9nSW1nL3VlZGl0b3JJbWFnZS8yMDIwMDYwMy8xNTkxMTQ3ODUxMjIyNTEwMzg5MzkucG5n.png

2. InvalidPartError400报错

截屏2021-07-23 下午5.46.29.png

解决办法:阿里云oss设置跨域访问时给暴露 Headers添加Etag

截屏2021-07-23 下午5.46.38.png

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

解决办法:在配置中加入secure:true

var client = new OSS.Wrapper({
 region : 'oss-cn-hanghzou',
 secure:true,//*这句话很重要!!!!!!!!!
 accessKeyId : 'xxx',
 accessKeySecret : 'xxx',
 bucket : 'xxx'
});