ios手机竖屏拍照上传旋转问题 并将base64转换为blob 将blob转换为file

首先

npm i exif-js -S

在组件中引入 import EXIF from 'exif-js'

我引入的是vantUI

<van-uploader :after-read="afterRead"
                      :before-read="beforeRead"
                      multiple
                      v-model="fileList" />

afterRead (file) { // 上传图片
      var _this = this
      if (file.length === undefined) {
        _this.imgPreview(file)
      } else {
        file.map(function (item) {
          _this.imgPreview(item)
        })
      }
      setTimeout(() => {
        _this.isImg = false
        _this.$toast.clear()
      }, 0)
    },
    beforeRead (file) { // 读取前
      if (file.length > 10) {
        this.$toast.loading({
          message: '图片过多,读取中请稍后...',
          forbidClick: true,
          loadingType: 'spinner',
          duration: 9999000
        })
      } else {
        this.$toast.loading({
          message: '图片读取中...',
          forbidClick: true,
          loadingType: 'spinner',
          duration: 9999000
        })
      }
      return true
    },
    // 将base64转换为blob
    dataURLtoBlob (dataurl) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    // 将blob转换为file
    blobToFile (theBlob, fileName) {
      theBlob.lastModifiedDate = new Date()
      theBlob.name = fileName
      return theBlob
    },
    // 对图片旋转处理
    rotateImg (img, direction, canvas) {
      // alert(img);
      // 最小与最大旋转方向，图片旋转4次后回到原方向
      var minStep = 0
      var maxStep = 3
      // var img = document.getElementById(pid);
      if (img == null) return
      // img的高度和宽度不能在img元素隐藏后获取，否则会出错
      var height = img.height
      var width = img.width
      // var step = img.getAttribute('step');
      var step = 2
      if (step == null) {
        step = minStep
      }
      if (direction === 'right') {
        step++
        // 旋转到原位置，即超过最大值
        step > maxStep && (step = minStep)
      } else {
        step--
        step < minStep && (step = maxStep)
      }
      // 旋转角度以弧度值为参数
      var degree = step * 90 * Math.PI / 180
      var ctx = canvas.getContext('2d')
      switch (step) {
        case 0:
          canvas.width = width
          canvas.height = height
          ctx.drawImage(img, 0, 0)
          break
        case 1:
          canvas.width = height
          canvas.height = width
          ctx.rotate(degree)
          ctx.drawImage(img, 0, -height)
          break
        case 2:
          canvas.width = width
          canvas.height = height
          ctx.rotate(degree)
          ctx.drawImage(img, -width, -height)
          break
        case 3:
          canvas.width = height
          canvas.height = width
          ctx.rotate(degree)
          ctx.drawImage(img, -width, 0)
          break
      }
    },
    imgPreview (file) { // 处理旋转问题
      var _this = this
      // let ctx = canvas.getContext('2d')
      let image = new Image()
      // image.crossOrigin = 'Anonymous'
      var Orientation = ''
      image.onload = function () {
        let canvas = document.createElement('canvas')
        let width = image.width
        let height = image.height
        canvas.width = width
        canvas.height = height
        canvas.getContext('2d').drawImage(image, 0, 0, width, height)

        // ctx.drawImage(image, 0, 0, width, height)

        // 修复ios拍照旋转
        EXIF.getData(image, function () {
          EXIF.getAllTags(image)
          Orientation = EXIF.getTag(image, 'Orientation')
        })
        if (Orientation !== '' && Orientation !== 1) {
          switch (Orientation) {
            case 6: // 需要顺时针（向左）90度旋转
              _this.rotateImg(image, 'left', canvas)
              break
            case 8: // 需要逆时针（向右）90度旋转
              _this.rotateImg(image, 'right', canvas)
              break
            case 3: // 需要180度旋转
              _this.rotateImg(image, 'right', canvas) // 转两次
              _this.rotateImg(image, 'right', canvas)
              break
          }
        }

        file.content = canvas.toDataURL('image/jpeg', 0.1)
        // alert(file.content)
      }
      image.src = file.content

      // return file.content
    },

循环获取到的list

_this.fileList.map(function (item) {

                // 转成文件

                var blob = _this.dataURLtoBlob(item.content)

                var tofile = _this.blobToFile(blob, item.file.name)

let formData = new FormData()

                  formData.append('file', tofile, tofile.name)

                  formData.append('fileType', 14)
                //ajax请求
})