前端上传文件oss

前端上传oss

1. 在html中引入相关的js文件（本地可以使用http）

<script src="https/gosspublic.alicdn.com/aliyun-oss-sdk-5.3.0.min.js"></script>
或  <script src="https/gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

2. 调用后端接口获取上传oss临时密钥

accessKeyId:’xxxxxxxxxxxxxxxxx’,
accessKeySecret: ’xxxxxxxxxxxxxxxx’,
stsToken: ’xxxxxxxxxxxxxxxxxx’,
region: "oss-cn-shanghai",//oss地址，我这边用的上海的服务器
bucket: "factory-attachment"//文件上传存放的文件夹

3. 实例化一个oss对象

  const client = new OSS.Wrapper({
    region: "oss-cn-shanghai",
    accessKeyId: ’xxxxxxxxxxxxxxxx’,
    accessKeySecret: ’xxxxxxxxxxxxxxxx’,
    stsToken: ’xxxxxxxxxxxxxxxx’,
    // 填写Bucket名称。
    bucket: "factory-attachment"
      });
      注意： //上传失败的话 可以放开下方注释代码 试试
      //client.options.endpoint.protocol = "https:";
  

4.同后端约定好地址的连接规则，调用oss官方的api上传文件

 //1.multipartUpload用于分片式上传文件
    client.multipartUpload(”地址拼接方式“,options（上传的文件))
    .then(*res* *=>*  {
        //上传成功后oss返回的文件访问地址
        //   console.log(res, "66");
        });
        
 //2.put用于上传图片，需要将上传文Buffer处理为base64
    client.put(”地址拼接方式“,options（上传的文件))
    .then((*res*) *=>*  {
        //这个结果应该就是url吧
         this.imgUrls = res.name;
         });
         
 //转换base64
 readFileAsBuffer(*file*) {
    const reader = new FileReader();
    return new *Promise*((*resolve*, *reject*) *=>*  {
    reader.readAsDataURL(file);
    reader.onload = *function* (*e*) {
    const base64File = reader.result.replace(
        /^data:\w+\/\w+;base64,/,
        ""
         );
        resolve(new OSS.Buffer(base64File, "base64"));
        };
    });
    
  //两种方法完整版
   1. 获取密钥自行解决
   2. multipartUpload
       async fnUploadRequest(*options*) {
        const client = new OSS.Wrapper({
                region: "oss-cn-shanghai",
                accessKeyId: ’xxxxxxxxxxxxx‘,
                accessKeySecret: ’xxxxxxxxxxxxxxxxx’,
                stsToken: ’xxxxxxxxxxxxxxxxxxxx’,
                // 填写Bucket名称。
                bucket: "factory-attachment"
                });
       //上传失败的话 可以放开下方注释代码 试试
       //client.options.endpoint.protocol = "https:";
        // 获取时间戳
        //   var file_re = await this.readFileAsBuffer(options);
         //   const timestamp = new Date().getTime();
    await client.multipartUpload( ’拼接地址’,options).then(*res* *=>*  {
        //这个结果应该就是url吧
        console.log(res, "66");
            });
        },
   3.Put
      async fnUploadRequest(*options*) {
            const client = new OSS.Wrapper({
            region: "oss-cn-shanghai",
            accessKeyId: ’xxxxxxxxxxxx‘,
            accessKeySecret: ’xxxxxxxxxxxxxxxx’,
            stsToken: ’xxxxxxxxxxxxxxxxx’,
        // 填写Bucket名称。
            bucket: "xxxxxxxxx",
            });
           const file1 = options.file;
        //上传失败的话 可以放开下方注释代码 试试
        //client.options.endpoint.protocol = "https:";
        // 获取时间戳
        var file_re = await this.readFileAsBuffer(file1);
        const timestamp = new Date().getTime();      
        await client.put(‘拼接路径’, file_re).then((*res*) *=>*  {
            //这个结果应该就是url吧
            this.imgUrls = res.name;
            console.log(res.name, "111");});
            },
      //图片转base64
       readFileAsBuffer(file) {
            const reader = new FileReader();
            return new Promise((resolve,reject) =>  {
            reader.readAsDataURL(file);
            reader.onload = function (e) {
            const base64File = reader.result.replace(
                /^data:\w+\/\w+;base64,/,
                "");
            resolve(new OSS.Buffer(base64File, "base64"));
        };
        });},

5.遇到的坑 1.上传失败，控制台报cors问题，需要在oss进行相关设置，能够支持所有的请求方式

  2.遇到multipartUpload方法上传文件时分片上传在最后中断时，需要在oss的暴露header中填入Etag
  3.上传要确保每次上传的拼接地址唯一性，不然会顶掉之前的上传文件