js 圖片上傳給后台的3種格式

1. file格式 (創建formData來完成file上傳)

我們的接口需求:

 

代碼:

<input type="file" id="imgfile" accept="image/jpeg, image/png, image/jpg" >


$("#imgfile").change(function () {
                    var formData = new FormData();
                    $.each($('#imgfile')[0].files, function (i, file) {
                        formData.set('idcard', file);   //idcard  字段 根據自己后端接口定
                    });
                    //processData: false, contentType: false,多用來處理異步上傳二進制文件。
                    that.$indicator.open();
                    $.ajax({
                        url: 'http://wjtest.jecinfo.cn:9090/indentity/check',
                        type: 'POST',
                        data: formData,                    // 上傳formdata封裝的數據
                        dataType: 'JSON',
                        cache: false,                      // 不緩存
                        processData: false,                // jQuery不要去處理發送的數據
                        contentType: false,                // jQuery不要去設置Content-Type請求頭
                        success:function (data) {  
                            if(data.code =='0'){
                                
                            }
                           
                        }
                    });

                });

 

2. base64格式

　　

<input type="file" id="imgfile">

var base64Pic = ''
document.getElementById('imgfile').onchange = function(){
      var fileReader = new FileReader();
      fileReader.readAsDataURL(this.files[0]);
      fileReader.onload = function(){
          base64Pic = fileReader.result;
          console.log(base64Pic )  //base64   可以直接放在src上 預覽
      }

 

3. Blob流格式

base64轉換為blob流

function dataURItoBlob(base64Data) {
    //console.log(base64Data);//data:image/png;base64,
    var byteString;
    if(base64Data.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(base64Data.split(',')[1]);//base64 解碼
    else{
        byteString = unescape(base64Data.split(',')[1]);
    }
    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime類型 -- image/png

    // var arrayBuffer = new ArrayBuffer(byteString.length); //創建緩沖數組
    // var ia = new Uint8Array(arrayBuffer);//創建視圖
    var ia = new Uint8Array(byteString.length);//創建視圖
    for(var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    var blob = new Blob([ia], {
        type: mimeString
    });
    return blob;
}  

 

 

更多參考鏈接:      https://blog.csdn.net/qq_34664239/article/details/94595508

　　　　　　　　https://blog.csdn.net/qq_34664239/article/details/94601498