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)
})