vue前端上傳文件到阿里雲oss的兩種方式，put文件流上傳，multipartUpload直接上傳

引入阿里雲oss的js

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

<input type="file" name="file" @change='selectFile' multiple="multiple"/>上傳圖片/文件

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...
項目中都是用<script>標籤直接在index.html中引用的

pushFile (file) {
    let that = this
    if (['jpeg', 'png', 'jpg'].indexOf(file.type.split('/')[1]) < 0) {
      alert('只支持jpg/png格式的圖片')
      return false
    }
    // orient=>照片的角度
    /* global EXIF */
    let orient
    EXIF.getData(file, function () {
      orient = EXIF.getTag(this, 'Orientation')
    })
    // 壓縮圖片須要的一些元素和對象
    let reader = new FileReader()
    let img = new Image()
    // 選擇得是圖片
    if (file.type.indexOf('image') === 0) {
      reader.readAsDataURL(file)
    }
    // 縮放圖片須要的canvas
    let canvas = document.createElement('canvas')
    let context = canvas.getContext('2d')
    // base64 地址加載完後
    img.onload = function () {
      // 圖片原始尺寸
      let originWidth = this.width
      let oringinHeight = this.height
      // 最大尺寸限制
      let maxWidth = 800
      let maxHeight = 800
      // 目標尺寸
      let targetWidth = originWidth
      let targetHeight = oringinHeight
      // 圖片尺寸超過800x800的限制
      if (originWidth > maxWidth || oringinHeight > maxHeight) {
        if (originWidth / oringinHeight > maxWidth / maxHeight) {
          // 更寬
          targetWidth = maxWidth
          targetHeight = Math.round(maxWidth * (oringinHeight / originWidth))
        } else {
          targetHeight = maxHeight
          targetWidth = Math.round(maxHeight * (originWidth / oringinHeight))
        }
      }
      // canvas 對圖片進行縮放
      canvas.width = targetWidth
      canvas.height = targetHeight
      // 清除畫布
      context.clearRect(0, 0, targetWidth, targetHeight)
      // 圖片壓縮
      context.drawImage(img, 0, 0, targetWidth, targetHeight)
      if (orient !== '' && orient !== 1) {
        // orient === 1是正常的
          switch (orient) {
            case 6: // 須要順時針向左90度旋轉
              that.rotateImg(img, 'left', canvas, targetWidth, targetHeight)
              break
            case 8: // 須要逆時針向右90度旋轉
              that.rotateImg(img, 'right', canvas, targetWidth, targetHeight)
              break
            case 3: // 須要180度旋轉
              that.rotateImg(img, 'right', canvas, targetWidth, targetHeight)
              that.rotateImg(img, 'right', canvas, targetWidth, targetHeight)
              break
          }
        }
        if (canvas.toBlob) {
          canvas.toBlob(function (blob) {
            // 在這裏實現上傳操做
            let reader2 = new FileReader()
            reader2.readAsArrayBuffer(blob)
            reader2.onload = function (event) {
              let buffer = new OSS.Buffer(event.target.result)
              that.client.put(storeAs, buffer).then((result) => {
                if (result.url) {
                  // 得到圖片地址
                  that.src= result.url
                }
              }).catch((err) => {
                console.log(err)
                alert('上傳失敗, 請從新上傳')
              })
            }
          }, file.type || 'image/png')
        }
      }
    rotateImg (img, direction, canvas, targetWidth, targetHeight) {
      // 最小與最大旋轉方向，圖片旋轉4次後回到原方向
      var minstep = 0
      var maxstep = 3
      if (img === null) return
      // img的高度和寬度不能在img元素隱藏後獲取，不然會出錯
      var step = 2
      if (step === null) {
        step = minstep
      }
      if (direction === 'right') {
        step++
        // 旋轉到原位置，即超過最大值
        step > maxstep && (step = minstep)
      } else {
        step--
        step < minstep && (step = maxstep)
      }
      // 旋轉角度以弧度值爲參數
      let degree = step * 90 * Math.PI / 180
      var ctx = canvas.getContext('2d')
      switch (step) {
        case 0:
          canvas.width = targetWidth
          canvas.height = targetHeight
          ctx.clearRect(0, 0, targetWidth, targetHeight)
          ctx.drawImage(img, 0, 0, targetWidth, targetHeight)
          break
        case 1:
          canvas.width = targetHeight
          canvas.height = targetWidth
          ctx.rotate(degree)
          ctx.clearRect(0, 0, targetHeight, targetWidth)
          ctx.drawImage(img, 0, -targetHeight, targetWidth, targetHeight)
          break
        case 2:
          canvas.width = targetWidth
          canvas.height = targetHeight
          ctx.rotate(degree)
          ctx.clearRect(0, 0, targetWidth, targetHeight)
          ctx.drawImage(img, -targetWidth, -targetHeight, targetWidth, targetHeight)
          break
        case 3:
          canvas.width = targetHeight
          canvas.height = targetWidth
          ctx.rotate(degree)
          ctx.clearRect(0, 0, targetHeight, targetWidth)
          ctx.drawImage(img, -targetHeight, 0, targetWidth, targetHeight)
          break
      }
    }
  }