Vue 和 HTML FormData配合axios或ajax上传文件,提交表单数据

69 阅读1分钟

创建一个FormData对象实例

1、常用的创建

let formData = new FormData();

2、vue中的创建

let formData = new window.FormData();

3、在表单的基础上创建

//根据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上传文件


四、HTML中上传文件


//HTML中

//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({