input上傳圖片時卡頓和vant圖片上傳

• 上傳圖片卡頓

使用vant的上傳文件組件實現頭像上傳時，發現在低版本谷歌瀏覽器上，點擊上傳會卡頓，過一會才展示文件選擇，如下爲vant的文件上傳組件

<van-uploader  v-model="headpic"></van-uploader>

其實是封裝input，通過accept設置可以接收的文件類型爲image類型的，來實現圖片上傳

解析後html如下：

組件默認accept爲image/*；

修改accpect的值爲具體文件格式，即可解決問題

如下：

<van-uploader  accept="image/png,image/jpg, image/jpeg, image/gif" v-model="headpic">
</van-uploader>

原因

原來是因爲Chrome的SafeBrowsing功能會在上傳或保存時檢查文件，
但是如果連接比較慢，那SafeBrowsing就會讓Chrome掛起一段時間，直到文件檢查結束或者超時
使用accept="image/png, image/jpeg, image/gif"就可以解決這個問題，因爲這些MIME類型在SafeBrowsing的白名單裏面，不需要檢查。

• 圖片多選屬性multiple在某些安卓ios上不起作用

將multiple設置爲false，單選上傳頭像時，發現iphonex上不起作用。

我的解決方法：當屬性在某款手機失效，可以多選圖片時，通過綁定上傳前的回調函數，來判斷是否多選了圖片，從而終止或繼續上傳

html

<van-uploader :multiple="false" :before-read="beforeRead"></van-uploader>

js

 // 返回布爾值
    beforeRead(file) {
      if (file[1]) {
       this.toast('請單張上傳');
        return false;//可終止文件讀取
      }
      return true;
    },

• 網絡慢，圖片上傳請求未返回，本地圖片已完成，造成數據錯誤

解決方法：在文件讀取時，給文件增加上傳中狀態，在圖片上傳請求返回後，將文件狀態置爲已完成或者失敗

html

<van-uploader :after-read="afterRead"></van-uploader>

js

//文件讀取完成後的回調函數
afterRead(file) {
//在這個方法體中寫請求
   //上傳中
    file.status = 'uploading';
    file.message = '上傳中...';

      //上傳失敗
    file.status = 'failed';
    file.message = '上傳失敗';
     

 //上傳完成
    file.status = '';
    file.message = ''; 
 },