vuejs手机拍照上传的方向旋转问题(已解决)

在用vue做 移动端项目的时候. 特别是调用相机拍照的时候有些手机会旋转照片,导致拍出来是 歪的, 横着的, 这里记录下怎么解决这个问题.

demo 请狠狠的戳这里 ¥  https://download.lllomh.com/cliect/#/product/A810032847082261

1,  安装  compressorjs 插件,导入

import Compressor from 'compressorjs';

2,data

  data(){
    return{
        imgSrc:''
    }
  },

3,定义修正部分 

加入 

@change="uploadImage($event)"

let file = e.target.files[0]; //获取第一个文件

this.beforeRead(file)

    beforeRead(file) {
      let _this=this
      return new Promise((resolve) => {
        // compressorjs 默认开启 checkOrientation 选项
        // 会将图片修正为正确方向
        new Compressor(file, {
          success(res){
            console.log(res,'ggggg')
            let img = new FileReader();
            img.readAsDataURL(res);
            console.log("img:",img)
            img.onload = ({ target }) => {
              // this.imgSrc = target.result; //将img转化为二进制数据 imgSrc 未压缩
              console.log("target:",target,'移动端修正后的图片数据')
              _this.dealImage(target.result, 500,_this.useImg)
            };
          },
          error(err) {
            console.log(err.message);
          },
        });
      });
    },

经过这个的修正, 就会自动复位正常了