ajax以及axios使用FormData上传文件、图片的方法
1.ajax实现上传
如果已经有一个Form表单，取得form对象，作为参数传入FormData对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<form name="form1" id="form1">
<input id="file" type="file" name="name"></input>
</form>
<script type="text/javascript">
var form=document.getElementById("form1");
var formdata=new FormData(form);
</script>
</body>
</html>
可以在已有表单数据的基础上，继续添加新的键值对
var formdata=new FormData();
formdata.append ("age" , "21");
使用FormData对象上传文件
var formdata=new FormData($("#form1").[0]);//获取文件法一
//var formdata=new FormData( );
//formdata.append("file" , $("#file")[0].files[0]);//获取文件法二
$.ajax({
type : 'post',
url : '#',
data : formdata,
cache : false,
processData : false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
contentType : false, // 不设置Content-type请求头
success : function(){}
error : function(){ }
})
2.axios实现上传()
axios({
method: 'post',
url: Url,
data: formData,
timeout: 6000,
}).then(function (data) {
if (data.data.success = true) {
vm.refreshAndCloseWindowTab()
}
}).catch(function (error) {
vm.loadShow = false;
vm.$Loading.error();
log(error);
});
注意,如果后台实体类添加@RequestBody 组件,需添加头
axios({
url: url,
method: 'post',
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify(data.productApply),
}).then(function (data) {
if (data.data.result == "success") {
vm.refreshAndClose()
} else {
vm.$Loading.error();
}
})
