VUEプロジェクト・エル・アップロード携帯電話のカメラのエンドIOSの問題アップロードするアルバムは、修理の90度回転しました

VUEプロジェクト互換性のある携帯端末要素はiOSモバイル端末が使用さEL-アップロードコンポーネント、90度回転し、次の解決策を表示します写真をアップロードするカメラの問題の写真をアップロードするために使用されます

 

イオスがel-アップロードアセンブリの画像処理方法beforePicUploadの写真をアップロードする必要があります

 

①、使用する必要がありEXIF-JS プラグインの処理の写真を：

NPMインストールEXIF-jsから--save

 

②紹介する新しいファイル、使用のインポートfileUtils.js のExif-JSを：

'EXIF-JS' からインポートEXIF

 

その後、輸出のデフォルトは、次の方法のうち：

'EXIF-JS'からインポートEXIF 

輸出デフォルト{ 
    （ファイル）=> {：getOrientation 
        返す新しい約束（（解決）=> { 
            EXIF.getData（ファイル、関数（）{ 
                constのオリエント= EXIF.getTag（この、「オリエンテーション'）
                解決（オリエント）
            }）
        }）
    }、
 
    dataURLtoFile：（dataurl、ファイル名）=> { 
        CONST ARR = dataurl.split（' '）
        CONSTのMIME =のARR [0] .match（/:(.*）？ ; /）[1] 
        CONST BSTR = ATOB（ARR [1]）
        、Nせ= bstr.length 
        =新しいUint8Array（N）u8arrましょう。
        一方、（N--）{ 
            u8arr [N] = bstr.charCodeAt（N）。
        }
        新しいファイルを返す（[u8arr]、ファイル名、{タイプ：MIME}）。
    }、
 
    rotateImage：（画像、幅、高さ）=> { 
        せキャンバス=のdocument.createElement（ 'キャンバス'）
        させCTX = canvas.getContext（ '2D'）
        ctx.save（）
        canvas.width =高
        canvas.height =幅
        ctx.rotate（90 *にMath.PI / 180）
        ctx.drawImage（イメージ、0、-height）
        ctx.restore（）
        canvas.toDataURLを返す（ "画像/ JPEG"）
    } 
}

 <fileUtils.js>

 

③の方法は、メソッドbeforePicUploadに画像を修正するために呼び出します。

まずfileUtils.jsを導入する必要があります

'@ / utilsの/ fileUtils.js' からの輸入のfileutils

 beforePicUpload方法：

beforePicUpload（ファイル）{ 
        新しいプロミス（（解決）=> {戻り
          fileUtils.getOrientation（ファイル）.then（（オリエント）=> { 
            （オリエント&&オリエント=== 6）{場合
                リーダ=新規FileReaderを聞かせて（）
                させIMG =新しいイメージ（）
                reader.onload =（E）=> { 
                    img.src = e.target.result 
                    img.onload =関数（）{ 
                      CONSTデータ= fileUtils.rotateImage（IMG、img.width、img.height）
                      CONST newFile = fileUtils.dataURLtoFile（データ、file.name）
                      解決（にnewFile）
                    }  
                }
                reader.readAsDataURL（ファイル） 
            }他{ 
                解決（ファイル）
            } 
          }）
        }）
    }

 

疑問にあなたが叫ぶことができれば、画像をアップロードします！