解决ios图片使用vue + elementUI上传旋转问题

项目快上线了。测试小姐姐突然找我，提出ios手机竖拍的照片会在pc上显示会逆时针旋转90度。

项目中使用element upload实现上传，在此记录下解决的方法。

<el-upload  ref="uploadSgs" :action="this.baseServerUrl+'/fileUpload/uploadPic?filepath=designFile'"  
            :on-success="handleSgsSuccess" :on-preview="handleSgsPreview" :beforeUpload="beforeAvatarUpload">
            <el-button size="small" type="primary"></el-button>
</el-upload>

在:beforeUpload 中对上传的图片进行处理。

beforeAvatarUpload(file) {
　　　　　//校验图片最大上传10M
        var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)；   
        const isLt2M = file.size / 1024 / 1024 < 10；
        if(!isLt2M) {  
            this.$message({  
                message: '上传文件大小不能超过 10MB!',  
                type: 'warning'  
            }); 
        return isLt2M;
        }else {
　　　　　　//这里beforeUpload方法可以返回一个Promise，我们可以通过resolve将处理过后的文件上传；
          return new Promise((resolve) => {
              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)
                  }
              })
            
          })
        }
}

这里需要安装exif插件

npm install exif-js --save

exif的使用方法看这里：http://code.ciaoca.com/javascript/exif-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")
    },
}

其他方法：

扫描二维码关注公众号，回复： 4488712 查看本文章

handlePictureDetailPreview(file) {
        console.log(file)
        const _self = this;
        this.dialogProcessImageUrl = file.url;
        this.dialogProcessVisible = true;
      },
      handleDetailRemove(file, fileList){
        const _self = this;
        _self.imageDetaillist.pop();
      },
      handleDetailSuccess(res,file) {
        console.log(file)
        console.log(res)
        const _self = this;
        let imgList={};
        let lastindex = res.obj.lastIndexOf('/');
        imgList.name=res.obj.substr(lastindex+1);
        imgList.url=urlConfig.imgServerUrl+res.obj;
        _self.imageDetaillist.push(imgList);
        _self.formImageDetail.image=res.obj;
      },

参考网站：https://blog.csdn.net/qq_23158083/article/details/82835357；