项目使用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("提交成功！");
});
returnfalse;//阻止表单默认提交
});
varoptions={
target:'#output',//把服务器返回的内容放入id为output的元素中
beforeSubmit:validate,//提交前的回调函数
success:showResponse,//提交后的回调函数
//url:url,//默认是form的action，如果申明，则会覆盖
//type:type,//默认是form的method（getorpost），如果申明，则会覆盖
//dataType:null,//html(默认),xml,script,json...接受服务端返回的类型
//clearForm:true,//成功提�aType=xml
varname=$('name',responseXML).text();
varaddress=$('address',responseXML).text();
$("#xmlout").html(name+""+address);
//dataType=json
$("#jsonout").html(data.name+""+data.address);
};
2、vue-upload-component
安装：
npminstallvue-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>
<liv-for="fileinfiles">
<span>{{file.name}}</span>
<buttontype="button"@click.prevent="remove(file)">移除</button>
</li>
</ul>
<file-upload
ref="upload"
v-model="files"
post-action="/"
@input-file="inputFile"
@input-filter="inputFilter"
>Uploadfile</file-upload></template>
<script>
import'vue-upload-component/dist/vue-upload-component.part.css'
importFileUploadfrom'vue-upload-component'
exportdefault{
components:{
FileUpload,
},
data(){
return{
files:[]
}
},methods:{
remove(file){
this.$refs.upload.remove(file)//会触发inputFile中删除条件
}
/**
*Haschanged
*@paramObject|undefinednewFile只读
*@paramObject|undefinedoldFile只读
*@returnundefined
*/
inputFile:function(newFile,oldFile){
if(newFile&&!oldFile){
//添加文件
}
if(newFile&&oldFile){
//更新文件
//开始上传
if(newFile.active!==oldFile.active){
console.log('Startupload',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
*@paramObject|undefinednewFile读写
*@paramObject|undefinedoldFile只读
*@paramFunctionprevent阻止回调
*@returnundefined
*/
inputFilter:function(newFile,oldFile,prevent){
if(newFile&&!oldFile){
//过滤不是图片后缀的文件
if(!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)){
returnprevent()
}
}
//创建blob字段用于图片预览
newFile.blob=''
letURL=window.URL||window.webkitURL
if(URL&&URL.createObjectURL){
newFile.blob=URL.createObjectURL(newFile.file)
}
}}
}
</script>
注意：文件上传之后的返回值Content-Type值不能是application/json这会导致IE去解析返回结果，最终调用文件的保存或者打开，此处需要与后端协商将Content-Type改为text/plain
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html