解决vue中使用element-ui中Upload上传图片后图片

问题：ios竖屏拍摄的图片上传后会旋转90度。

解决方案：

1.使用upload的beforeUpload方法获取到要上传的文件,beforeUpload方法可以返回一个Promise，可以通过resolve file文件将处理之后的文件进行上传。

2.使用exif-js库获取图片的Orientation信息，如果Orientation为6，那么这张图片便是ios竖着拍的照片，需要处理，否则直接将原文件上传即可。

3.如果图片文件需要处理，则将文件先转换为Image对象吗，这里用到FileReader，看代码中如何使用。

4.然后将Image对象画到canvas画布上，并将画布进行旋转处理。

5.将旋转之后的canvas使用toDataURL得到base64数据。

6.将base64数据再转化为File文件，上传。

===================================================================================

1.首先安装exif-js库

npm install exif-js --save

2.下面是处理的时候需要使用的工具方法，文件名为fileUtil.js

import EXIF from 'exif-js'

export default {
  getOrientation: (file) => {
      return new Promise((resolve) => {
          EXIF.getData(file, function () {
              const orient = EXIF.getTag(this, 'Orientation')
              resolve(orient)
          })
      })
  },

  dataURLtoFile: (dataurl, filename) => {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n);
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {type: mime});
  },

  rotateImage: (image, width, height) => {
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      ctx.save()
      canvas.width = height
      canvas.height = width
      ctx.rotate(90 * Math.PI / 180)
      ctx.drawImage(image, 0, -height)
      ctx.restore()
      return canvas.toDataURL("image/jpeg")
  }
}

3.vue模板中使用

<template>
  <el-upload
     :action='actionURL'
     :show-file-list="false"
     :on-change="handleChange"
     :before-upload="beforeAvatarUpload">
      <span class="font-color">上传照片</span>
      <div class="upload-tips">注：只能上传JPG/JPEG/PNG/GMP文件，且不超过2MB</div>
  </el-upload>
</template>

<script>
import fileUtil from '../../assets/utils/fileUtil'
export default {
  methods : {
    beforeAvatarUpload(file) {
      const type = file.type.split('/')[1]
      const arr = ['jpg','jpeg','png','gmp']
      let isJPG = true
      arr.find(item => {
        if (item == type) {
          return isJPG = true
        } else {
          return isJPG = false
        }
      });
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/JPEG/PNG/GMP 格式!');
        return isJPG;
      } else if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return isLt2M;
      } else {
        return new Promise((resolve,reject) => {
          fileUtil.getOrientation(file).then((orient) => {
            if (orient && orient === 6) {
              let reader = new FileReader()
              let img = new Image()
              reader.onload = (e) => {
                img.src = e.target.result
                img.onload = function () {
                  const data = fileUtil.rotateImage(img, img.width, img.height)
                  const newFile = fileUtil.dataURLtoFile(data, file.name)
                  resolve(newFile)
                }
              }
              reader.readAsDataURL(file)
            } else {
              resolve(file)
            }
          })
        })
      }
    }
  }
}
</script>