将本地数据（.xlsx、.docx等文件）上传或导入数据库，有时候需要使用FormData 对象。FormData对象，可以把所有表单元素的name与value组成一个queryString,提交到后台。
一、创建对象：
创建一个FormData对象实例
1、常用的创建
let formData = new FormData();
2、vue中的创建
let formData = new window.FormData();
3、在表单的基础上创建
<form id="fromCont" action="" method="post">
<input type="text" name="content">
<input type="submit" value="提交">
</form>
//根据id获取表单
var form = $("#fromCont");
//初始化实例
var formData = new FormData(form);
// 获取content内容
var content= formData.get("content");
//通过append() 方法向对象中添加content键值对
formData.append("content",content);
二、操作方法：
formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。
1、获取值
//通过get(key)/getAll(key)来获取对应的value
formData.get("value");
2、添加数据
//通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
formData.append("key1", "value1");
formData.append("key2", "value2");
formData.append("key2", "value3");
//获取key1
formData.get("key1"); //返回 "value1"
formData.get("key2"); //返回 "value2"
formData.getAll("key2"); //返回 ['value2','value3']
3、设置、修改数据
//通过set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值。
formData.append("key1", "value1");
formData.set("key1", "value2");
//获取key1
formData.get("key1"); //返回 "value2"
4、删除数据
//通过delete(key)，来删除数据
formData.append("key1", "value1");
formData.delete("k1");
//获取key1
formData.get("key1"); //返回 []
5、判断数据的存在
//通过has(key)来判断是否对应的key值,如果有对应的key值就返回true,如果没有则返回false
formData.append("key1", "value1");
formData.has("key1"); // true
formData.has("key2"); // false
三、vue上传文件
<template>
</div>
<div class="fileItem">
//上传文件的input，type设置为file
<input type="file" ref="fileId" @change="getFile">
</div>
</div>
</template>
<script>
export default {
data(){
return:{
//赋值input中file内容
xlsxFile:''
}
},
methods:{
getFile(){
//获取file内容
let files = this.$refs.fileId.files[0];
this.xlsxFile = files;
},
//上传文件
importRow() {
let that = this;
if (that.xlsxFile == "") {
that.$message.error('请先添加文件');
return;
}
// vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
//创建一个FormData对象，然后通过append() 方法向对象中添加键值对
let formData = new window.FormData();
formData.append("file", that.xlsxFile);
// that.importUrl 上传的接口url
that.$axios.post(
that.importUrl,
formData
).then(function(response) {
that.$message.success('上传成功');
}) .catch(function(error) {
that.$message.error(res.data.msg);
});
}
}
</script>
四、HTML中上传文件
//HTML中
<div>
<input name="file" type="file" id="fileCont" value="">
</div>
//JS中，这里引入了Jquery
$('#fileCont').on('change',function(){
var fileObj = $(this).files[0];
if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
//这里是我自己定义的弹框方法
popup({type:'tip',bg:false,msg:"请选择件",delay:1000,clickDomCancel:true});
return;
}
var formFile = new FormData();
//加入文件对象,向接口传入两个参数file,id
formFile.append("file", fileObj);
formFile.append("id", id);
var data = formFile；
$.ajax({
url:urlCur,
data: data,
type: "POST",
dataType: "json",
//上传文件无需缓存
cache: false,
//用于对data参数进行序列化处理 这里必须false
processData: false,
//必须
contentType: false,
success: function (res) {
if(res.code === 200){
popup({type:'success',bg:false,msg:"上传成功",delay:1000,clickDomCancel:true});
}else{
popup({type:'error',bg:false,msg:res.msg,delay:1000,clickDomCancel:true});
}
},
})
})
上传文件需要前后端的小伙伴儿配合，一起完成，第一次进行文件上传时，遇到了一些麻烦，比如前端传值的方法不对、后台接口报500，但是只要有耐心，肯钻研，就一定会成功的！
路漫漫其修远兮，吾将上下而求索。
joyful.jpg
