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

上傳圖片/文件

mounted () {
  this.initConfig() // 調(diào)用后臺接口獲取阿里云上傳下載通行證
}
methods: {
  initConfig () {
    // 初始化oss權(quán)限
    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上的名字
    // 調(diào)用上傳方法
    that.client.multipartUpload("cloudStorage/" + storeAs, _file, {
      progress: function* (percentage) {
        let fileloadingNum = Math.ceil(percentage * 100) + "%"
        console.log(fileloadingNum) // 上傳文件進度
      }
    }).then(function (result) {
      // 調(diào)用后臺添加文件的接口
      let url = "netdisc.addDoc"
      let params = {
        data: "xx"
      }
      that.$api.send(url, params).then((response) => {
        if (response.status === 200) {
          // 上傳成功
        }
      })
    }).catch(function (err) {
      // 上傳失敗,彈出上傳失敗的消息
    })
  }
}

如果傳到阿里云的圖片要展示出來,要在src的圖片路徑后面加上阿里云后綴,這樣用蘋果手機拍的照片就不會出現(xiàn)圖片翻轉(zhuǎn)的問題,像這樣
xxx.JPG?x-oss-process=image/auto-orient,1/resize,m_fill,w_1600

如果圖片要用canvas做壓縮, 得到的是base64數(shù)據(jù)，要轉(zhuǎn)換成blob對象，再轉(zhuǎn)為buffer流。用put上傳
有些手機不支持canvas直接轉(zhuǎn)為blob對象可以引入canvas-to-blob.min.js 將canvas轉(zhuǎn)為blob對象
blob插件地址: https://github.com/blueimp/Ja...
獲得圖片的方向，引入exif.js
exif.js 官網(wǎng)地址 http://code.ciaoca.com/javasc...
項目中都是用