关于本人在实际项目中遇到的上传文件的问题,总结如下:
- 通过new formData 对象然后赋值给formdata通过ajax上传;
- 通过form表单的默认post请求提交。
然而坑穿了,遇到了许许多多的问题;
因为上传文件之后还需要做异步处理,渲染返回的内容。
故此先处理了form表单提交默认会唤起浏览器跳转至新的url↓
<form class="myCourseList" target="clearForm" id="familyBlessing1" method="post" enctype="multipart/form-data">
</form>
<iframe src="#" id="clearForm" name="clearForm" style="display:none;" frameborder="0"></iframe>
然而并没有什么卵用,因为部分使用的是oss服务,先上传至oss再将路径保存到数据库;上传文件之后还需要渲染数据
使用jquery-form.js会导致
var form = $('form'),
options = {
url:'/oss/uploadFile', //上传文件的路径
type:'post',
success:function(data){
console.log('上传照片 返回>>>',data);
data.map(function(it,id,ar){
v.$data.previewImgArr.push(it);
qjfArr.push({
classTimeId:getQueryString('classTimesId'),
fileName: it.original,
filePath: it.url,
fromPort: "2",
materialTypeId: 1,
});
});
}
};
form.ajaxSubmit(options);
然而并没有什么卵用,在上传至oss服务后还需要保存到数据库
所以咱们还得发一次请求,
form.ajaxSubmit({
url:'/learningMaterials/addLearningMaterials',
type:'post',
data:qjfArr,
success:function(data){
},
error:function(err){
console.log('err',err)
}
})
然后就出事啦, 请求头和发送数据的方式不对了, 后台直接拦截都不接收了、 等问题解决继续跟进。
解决方案
$.ajax({
type: 'post',
url: "/oss/uploadFile",
data: formData,
cache: false,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false // 告诉jQuery不要去设置Content-Type请求头
})
将jquery默认更改请求头和数据序列化的操作设置关闭就好。
然后等代码
success:function(data){
//将oss存储成功返回的URL ,
// 存到你的服务器。
}