将本地数据(.xlsx、.docx等文件)上传或导入数据库,有时候需要使用FormData 对象。FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。
一、创建对象:
创建一个FormData对象实例
1、常用的创建
let formData = new FormData();
2、vue中的创建
let formData = new window.FormData();
3、在表单的基础上创建
1.<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、添加数据
1.//通过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、设置、修改数据
1.//通过set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值。 formData.append("key1", "value1"); formData.set("key1", "value2"); //获取key1 formData.get("key1"); //返回 "value2"
4、删除数据
1.//通过delete(key),来删除数据 formData.append("key1", "value1"); formData.delete("k1"); //获取key1 formData.get("key1"); //返回 []
5、判断数据的存在
1.//通过has(key)来判断是否对应的key值,如果有对应的key值就返回true,如果没有则返回false formData.append("key1", "value1"); formData.has("key1"); // true formData.has("key2"); // false
三、vue上传文件
1. <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中上传文件
1.//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,但是只要有耐心,肯钻研,就一定会成功的!
路漫漫其修远兮,吾将上下而求索。
最后
如果对您有帮助,希望能给个????评论/收藏/三连!
博主为人老实,无偿解答问题哦❤
原文:https://www.jianshu.com/p/51188659d778