VUE項目中文件上傳兼容IE9

項目使用VUE編寫，UI是ElementUI，但是Element的Upload組件是不兼容IE9的。因為IE9中無法使用FormData。

查找資料基本有兩種解決方法：1.引入JQuery和jQuery.form。2.使用vue-upload-component

1、jQuery.form

　　插件提供ajaxSubmit和ajaxForm兩種表單提交方式，注意：不要對同一個表單同時使用兩種方式。

　　ajaxSubmit是jQuery表單插件核心函數。非常靈活，因為它依賴於事件機制，只要有事件觸發就能使用ajaxSubmit()提交表單，eg：超鏈接、圖片、按鈕的click事件。

　　ajaxForm是對$(“any”).ajaxSubmit(options)函數的一個封裝，適用於表單提交的方式（注意，主體對象是<form>），會幫你管理表單的submit和提交元素（[type=submit],[type=image]）的click事件。在出發表單的submit事件時：阻止submit()事件的默認行為（同步提交的行為）並且調用$(this).ajaxSubmit(options)函數。

$('#myForm').ajaxForm(function() {     
   $('#output1').html("提交成功！");      
});    
         
$('#myForm2').submit(function() {  
   $(this).ajaxSubmit(function() {     
      $('#output2').html("提交成功！");      
   });  
   return false; //阻止表單默認提交  
}); 

var options = {  
   target: '#output',          //把服務器返回的內容放入id為output的元素中      
   beforeSubmit: validate,  //提交前的回調函數  
   success: showResponse,      //提交后的回調函數  
   //url: url,                 //默認是form的action， 如果申明，則會覆蓋  
   //type: type,               //默認是form的method（get or post），如果申明，則會覆蓋  
   //dataType: null,           //html(默認), xml, script, json...接受服務端返回的類型  
   //clearForm: true,          //成功提交后，清除所有表單元素的值  
   //resetForm: true,          //成功提交后，重置所有表單元素的值  
   timeout: 3000               //限制請求的時間，當請求大於3秒后，跳出請求  
}  
function validate(formData, jqForm, options) { //在這里對表單進行驗證，如果不符合規則，將返回false來阻止表單提交，直到符合規則為止  
   //方式一：利用formData參數  
   for (var i=0; i < formData.length; i++) {  
       if (!formData[i].value) {  
            alert('用戶名,地址和自我介紹都不能為空!');  
            return false;  
        }  
    }   
  
   //方式二：利用jqForm對象  
   var form = jqForm[0]; //把表單轉化為dom對象  
      if (!form.name.value || !form.address.value) {  
            alert('用戶名和地址不能為空，自我介紹可以為空！');  
            return false;  
      }   
}  
  
function showResponse(responseText, statusText){  
   //dataType=xml  
   var name = $('name', responseXML).text();  
   var address = $('address', responseXML).text();  
   $("#xmlout").html(name + "  " + address);  
   //dataType=json  
   $("#jsonout").html(data.name + "  " + data.address);  
}; 

 

2、vue-upload-component

　　安裝：

npm install vue-upload-component --save

　　使用：

　　設置this.$refs.upload.active = true，觸發上傳。

　　@input-filter是上傳前的鈎子函數，用於判斷是否符合要求

　　@input-file是上傳回調函數,每次上傳的狀態變化時 都會調用@input-file綁定的回調，形參是newFile, oldFile，通過新舊文件的對比來得到當前的狀態

　　data:附加請求的參數

　　extensions:允許上傳文件的后綴（"jpg,gif,png,webp"）

　　headers:自定義請求headers

<template>

<ul> <li v-for="file in files"> <span>{{file.name}}</span> <button type="button" @click.prevent="remove(file)">移除</button> </li> </ul>

<file-upload 
　　ref="upload"
　　v-model="files" 
　　post-action="/"
　　@input-file="inputFile"
　　@input-filter="inputFilter"

>Upload file</file-upload> </template>

<script>

import 'vue-upload-component/dist/vue-upload-component.part.css'

import FileUpload from 'vue-upload-component'

export default { components: { FileUpload, }, data() { return { files: [] } }, methods: {

 　　remove(file) {
      this.$refs.upload.remove(file)//會觸發inputFile中刪除條件 }

 /** * Has changed * @param Object|undefined newFile 只讀 * @param Object|undefined oldFile 只讀 * @return undefined */ inputFile: function (newFile, oldFile) {

　　　　if (newFile && !oldFile) { // 添加文件 } if (newFile && oldFile) { // 更新文件 // 開始上傳 if (newFile.active !== oldFile.active) { console.log('Start upload', newFile.active, newFile) // 限定最小字節 if (newFile.size >= 0 && newFile.size < 100 * 1024) { newFile = this.$refs.upload.update(newFile, {error: 'size'}) } } // 上傳進度 if (newFile.progress !== oldFile.progress) { console.log('progress', newFile.progress, newFile) } // 上傳錯誤 if (newFile.error !== oldFile.error) { console.log('error', newFile.error, newFile) } // 上傳成功 if (newFile.success !== oldFile.success) { console.log('success', newFile.success, newFile) } } if (!newFile && oldFile) { // 刪除文件 // 自動刪除 服務器上的文件 if (oldFile.success && oldFile.response.id) { // $.ajax({ // type: 'DELETE', // url: '/file/delete?id=' + oldFile.response.id, // }); } }

　　　　// 自動上傳

      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {

        if (!this.$refs.uploader.active) {

          this.$refs.uploader.active = true

        }

      }

 }, /** * Pretreatment * @param Object|undefined newFile 讀寫 * @param Object|undefined oldFile 只讀 * @param Function prevent 阻止回調 * @return undefined */ inputFilter: function (newFile, oldFile, prevent) { if (newFile && !oldFile) { // 過濾不是圖片后綴的文件 if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) { return prevent() } } // 創建 blob 字段 用於圖片預覽 newFile.blob = '' let URL = window.URL || window.webkitURL if (URL && URL.createObjectURL) { newFile.blob = URL.createObjectURL(newFile.file) }

} }

}

</script>

注意：文件上傳之后的返回值 Content-Type值不能是application/json 這會導致IE去解析返回結果，最終調用文件的保存或者打開，此處需要與后端協商將Content-Type改為text/plain