文件上传 formdata,Vue文件上传
这篇文章主要介绍了某视频剪辑软件上传文件上传上传的解决全流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue上传文件上传上传解决爱可信实例的配置关键配置整体流程解决跨域上传文件跨域上传上传格式等问题某视频剪辑软件批量上传文件简单说明一个实现思路
vue上传文件formData上传解决
axios实例的配置关键配置
上传上传文件类型有变项目中封装的公共方法需要更改头部请求信息设置为设为"多部分/表单数据"
整体流程解决跨域上传文件跨域上传FormData格式等问题
某视频剪辑软件中师结构
input type=" file " @ change=" handle upload "/
上传图片更改传递到接口事件
const handleUpload=(e)={
const service=axios.create({
baseURL:"/API "，
withCredentials: true //cors跨域要让后台设置克-奥二氏分级量表跨域需后台设配合
})
const params=new FormData() //声明上传数据类型
params.append(file ，event.target.files[0])
params.append(tp ， partImg )
服务。post(UploadFiles/UploadImg ，params，{
标题：{
content-Type : multipart/form-data //修改请求头
}
})。然后(res={
//console.log(提交成功);
})
}
处理上传需要在vue3项目中返回
基础地址设置为api vue项目中创建vue.config文件并写入代理人跨域代理vue2和vue3都支持
vue 批量上传文件
业务背景：一次性批量上传多个文件，只请求一次接口，则手动提交到后台
简单说明一个实现思路
前端某视频剪辑软件统一处理多个文件保存到上传对象中，请求后台接口后台接口使用对象进行接收，可转化成MultipartHttpServletRequest对象接收前端上传对象//前端使用的用户界面组件是虚拟环境的蚂蚁设计的上传组件
模板
div class=clearfix
上传
:multiple=true
：上传前=上传前
:list-type=listType
:file-list=fileList
@preview=handlePreview
@change=handleChange
@download=handleDownload
div v-if=isMore
a-icon type=plus /
div class=ant-upload-text 文件上传/div
/div
div v-if=！是更多文件列表长度1
a-icon type=plus /
div class=ant-upload-text 文件上传/div
/div
/a-上传
a-modal:visible= preview visible :footer= null @ cancel= handle cancel
img alt= example style= width:100% :src=预览图像/
/a-modal
/div
/模板
射流研究…的核心代码：
handleUpload() {
const { fileList }=this
if (fileList.length 0) {
var notUploaded=[]
定义变量上传=[]
fileList.forEach((item)={
如果(项。状态项目。status=== done ){
上传。推送(item.url)
}否则{
未上传。推送（项目)
}
})
假设表单数据=新表单数据()
notUploaded.forEach((文件，索引)={
//所有文件保存在上传中
formData.append(`file${index} `，file.originFileObj)
})
console.log(formData ，JSON.stringify(formData))
//请求批量上传接口
batchUploadFile(formData，this.targetS).然后((res)={
if (res.success) {
console.log(res ，JSON.stringify(res))
}否则{
这个message.error(图片上传失败，请重新上传)
}
})
//返回
//这个. emit(loadImgUrl ，this.loadImgUrl.join(，))
//this.fileList=[]
}否则{
//如果没有图片则返回空
//这个. emit(loadImgUrl ，)
//this.fileList=[]
}
},
后台代码：
@ApiOperation(value=批量文件上传（最多同时上传5个文件),注释=批量文件上传)
@ post映射(/batchUploadFile/{文件路径} )
公开结果？batchUploadFile(@ API param(value=自定义上传文件的路径)
@PathVariable(filePath )字符串文件路径，
对象请求)引发异常{
multiparthttpservlet请求multipart request=(multipart http servlet请求)请求；
MapString，多部分文件fileMap=多部分请求。获取fileMap()；
if (fileMap.isEmpty()) {
返回结果。错误(上传文件不能为空);
}
if (fileMap.size() 5) {
返回结果。错误(批量上传文件数量不能超过5个文件);
}
ListMapString，Object mapList=ftputils。batchuploadfile(fileMap，文件路径)；
返回结果. OK(mapList)；
}
注意：以上代码部分功能不完全只能作为参考，重点是实现思路
1.前端是如何组装参数
假设表单数据=新表单数据()
notUploaded.forEach((文件，索引)={
//所有文件保存在上传中
formData.append(`file${index} `)，file。originfilobj)//核心代码
})
2.后台使用MultipartHttpServletRequest对象进行接受
multiparthttpservlet请求multipart request=(multipart http servlet请求)请求；
MapString，多部分文件fileMap=多部分请求。获取fileMap()；
前端参数格式：
请求结果：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。