ElementUI中el-upload文件上传后,编辑时文件回显及重新提交思路
文件回显
后端返回文件名和文件路径
重新提交
- 后端返回的文件名和文件路径,仅用于展示
- 新建一个ref为editUpload的el-upload组件,用户没有更换文件(this.$refs.editUpload.uploadFiles.length === 0)时,使用FormData方式提交(没有文件内容,后端不变更数据库文件信息);用户更换了文件时,使用:this.$refs.editUpload.submit()提交(有文件内容,后端更新数据库中的文件信息;也可以使用FormData方式提交);
- 图示:
axios使用FormData提交例子
import axios from "axios"
let formData = new FormData()
formData.append("data1", "xxx")
formData.append("data2", "xxx")
axios({
method: "post",
url: this.uploadEditUrl,
data: formData,
headers: {
"Content-Type": "multipart/form-data"
}
})
.then((res) => {
})
.catch((err) => {
console.error(err)
})
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步