摘要：引入阿里云的上傳圖片文件調用后臺接口獲取阿里云上傳下載通行證初始化權限去掉對的校驗選擇文件傳到上的名字調用上傳方法上傳文件進度調用后臺添加文件的接口上傳成功上傳失敗彈出上傳失敗的消息如果傳到阿里云的圖片要展示出來要在的圖片路徑后面

上傳圖片/文件

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...
項目中都是用