vuejs手機拍照上傳的方向旋轉問題(已解決)

在用vue做 移動端項目的時候. 特别是調用相機拍照的時候有些手機會旋轉照片,導緻拍出來是 歪的, 橫着的, 這裡記錄下怎麼解決這個問題.

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);
          },
        });
      });
    },