前端js上传图片、文件到阿里云OSS

首先介绍一下流程：

1. 因为我们走的是STS模式，所以首先去后台获取oss配置(accessKeyId，accessKeySecret，stsToken)
2. 创建oss实例
3. 前后端商量好文件上传路径，直接上传

 

首先引用oss的SDK

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

因为我用的vue

            <input
              type="file"
              name="companyLogo"
              id="file0"
              class="file_companyLogo"
              multiple="multiple"
              @change="companyLogo($event)"
            >
<el-button type="primary" @click="uploading(true)">保存</el-button>

 上传文件函数

companyLogo(event) {
      var file = event.target.files[0];
      var fileSize = file.size; //文件大小
      var filetType = file.type; //文件类型
      //创建文件读取对象
      if (fileSize <= 10240 * 1024) {
        if (filetType == "image/jpeg") {
          this.imgFile = file;
          return;
        } else {
          this.$message.error("图片格式不正确");
        }
      } else {
        this.$message.error("图片大小不正确");
      }
    },

//将文件转为blob类型
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"));
        };
      });
    },
async uploading(flag) {
      if (flag) {
        var params = {
          merchant_id: this.mi,
          username: this.user_account,
          dtoken: this.token
        };
        //从后台获取oss配置
        var oss_result = await logoHttp.get_oss_token(params);
        if (oss_result.ret == 0) {
          var file_re = await this.readFileAsBuffer(this.imgFile)
          var oss_obj = oss_result.key;
          let client = new OSS.Wrapper({
            region: "oss-cn-beijing", //你的oss地址 ，具体位置见下图
            accessKeyId: oss_obj.AccessKeyId, //你的ak
            accessKeySecret: oss_obj.AccessKeySecret, //你的secret
            stsToken: oss_obj.SecurityToken, //这里我暂时没用，注销掉
            bucket: "808-protocol-data" //你的oss名字
          });
          var imgtype = this.imgFile.type.substr(6,4);
          var store = "merchant-logo/"+this.subsidiaryOrgan+'.'+imgtype
          client.put(store,  file_re).then(res =>{
            //这个结果应该就是url吧
            console.log(res)
            var a = client.signatureUrl(store);
            this.oss_imgurl = a;
            console.log(a)
          })
          
        }
      }
    }

核心是

let client = new OSS.Wrapper({
   region: "oss-cn-beijing", //你的oss地址 ，具体位置见下图
   accessKeyId: oss_obj.AccessKeyId, //你的ak
   accessKeySecret: oss_obj.AccessKeySecret, //你的secret
   stsToken: oss_obj.SecurityToken, //这里我暂时没用，注销掉
   bucket: "808-protocol-data" //你的oss名字
});

var store = "merchant-logo/"+this.subsidiaryOrgan+imgname
client.put(store,  file_re).then(res =>{
    //这个结果里面包含文件url
    console.log(res)
    //获取文件在线的加密链接，赋值在浏览器就能直接查看
    var a = client.signatureUrl(store);
    console.log(a)
 })

参考https://www.cnblogs.com/MainActivity/p/8492211.html