vue前端上传文件到阿里云oss的两种方式，put文件流上传，multipartUpload直接上传

摘要：引入阿里云的上传图片文件调用后台接口获取阿里云上传下载通行证初始化权限去掉对的校验选择文件传到上的名字调用上传方法上传文件进度调用后台添加文件的接口上传成功上传失败弹出上传失败的消息如果传到阿里云的图片要展示出来要在的图片路径后面

上传图片/文件

mounted () {
  this.initConfig() // 调用后台接口获取阿里云上传下载通行证
}
methods: {
  initConfig () {
    // 初始化oss权限
    let url = "document.getAccess"
    let params = {
       type: "H"
    }
    this.$api.send(url, params).then((response) => {
      if (response.status === 200) {
        let data = response.body.data.data
        /* global OSS */ // 去掉esllint对OSS的校验
        this.client = new OSS.Wrapper({
          region: "oss-cn-shenzhen",
          accessKeyId: "your accessKeyId",
          accessKeySecret: "your accessKeySecret",
          stsToken: "your stsToken",
          bucket: "xx"
       })
     }
   })
  },
  selectFile (e) {
    // 选择文件
    for (let i = 0; i < e.target.files.length; i++) {
      this.pushFile(e.target.files[i])
    }
  },
  pushFile (file) {
    let that = this
    let _file = file
    var storeAs = "" // 传到oss上的名字
    // 调用上传方法
    that.client.multipartUpload("cloudStorage/" + storeAs, _file, {
      progress: function* (percentage) {
        let fileloadingNum = Math.ceil(percentage * 100) + "%"
        console.log(fileloadingNum) // 上传文件进度
      }
    }).then(function (result) {
      // 调用后台添加文件的接口
      let url = "netdisc.addDoc"
      let params = {
        data: "xx"
      }
      that.$api.send(url, params).then((response) => {
        if (response.status === 200) {
          // 上传成功
        }
      })
    }).catch(function (err) {
      // 上传失败,弹出上传失败的消息
    })
  }
}

如果传到阿里云的图片要展示出来,要在src的图片路径后面加上阿里云后缀,这样用苹果手机拍的照片就不会出现图片翻转的问题,像这样
xxx.JPG?x-oss-process=image/auto-orient,1/resize,m_fill,w_1600

如果图片要用canvas做压缩, 得到的是base64数据，要转换成blob对象，再转为buffer流。用put上传
有些手机不支持canvas直接转为blob对象可以引入canvas-to-blob.min.js 将canvas转为blob对象
blob插件地址: https://github.com/blueimp/Ja...
获得图片的方向，引入exif.js
exif.js 官网地址 http://code.ciaoca.com/javasc...
项目中都是用