文件上传功能应该怎么做?
上传文件的功能是后端来做
点击浏览按钮能弹出选择的文件夹
点击上传的按钮需要调接口完成上传功能下面是定义的接口和后端postman截图只要传一个path就可以了,请问应该在Upload方法里面怎么调用接口把需要上传的文件传给后端呢
回复
1个回答

test
2024-06-29
流程如下:1、input type = file
2、调用上传前事件3、上传前事件中将file
文件转formData
4、调用后端oss
接口上传文件5、上传完成后回显数据6、点击图片/视频预览
<el-upload class="upload-demo" action="" :file-list="fileList" :before-upload="beforeAvatarUpload">
<el-button icon="el-icon-upload" size="small" type="primary">
上传
</el-button>
</el-upload>
beforeAvatarUpload
为文件上传前的操作,该方法中会携带一个参数file
,file
就是当前上传的文件,我们需要用new FormData()
转为file
文件格式,调用后端接口上传图片/视频。
beforeAvatarUpload(file) {
let formData = new FormData();
formData.append('file',file)
// 调用oss后端接口
ossUpload(formData).then(el=>{
// 上传成功后返回的数据:el,该参数内的url就是视频/图片http的访问地址,将该方法存储到回显的数据中
this.upload(el.data)
}).catch(err=>{console.log(err)})
}
upload(val) {
// 此处可以校验上传的格式,如果视频格式不是mp4则会提示
if(val.fileSuffix != ".mp4"){
return this.$message.error('视频格式不正确')
}
this.dataList.push({
fvName: val.name,
fvUrl: val.url,
//.....
})
}
图片的上传也是一样的,此时图片上传和视频上传的一般流程就结束了,页面列表中遍历dataList
即可回显数据。
如果你用的element ui那么直接用组件即可,不需要input type = file
,如果你不想额外写函数上传,那么只需要将组件的action的数据填写成后端给到的oss请求,然后利用组件的上传成功事件on-success事件获取上传回调
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容