背景
好久没写博客了,最近在玩avue-form 的文件上传,想着百度了好久,真心没有一篇能完整的讲解这个功能,在我的摸索下,想写一篇让有使用这个的兄弟们有个参考。自己也留个笔记。
如何使用avue-form的表单
引用avue-form 的代码
<avue-form :option="imgOption" v-model="imgForm" :upload-preview="uploadPreview" :upload-error="uploadError" :upload-delete="uploadDelete" :upload-before="uploadBefore" :upload-after="uploadAfter" @submit="handleSubmit" > </avue-form>
定义
imgOption: {
labelWidth: 120,
// 去除保存按钮和清空按钮,清空按钮,假如我引用其他组件一起进来,无法清空其他表单的值,遂这我就都删了
emptyBtn: false,
submitBtn: false,
column: [
{
label: \'附件上传\',
prop: \'imgUrl\',
//支持多个文件上传
multiple: true,
type: \'upload\',
loadText: \'附件上传中,请稍等\',
span: 24,
propsHttp: {
//假如选择了多个附件同时上传需要定义如下data.0 这样上传成功后,回显图片就会调用多次uploadAfter
// res: \'data\'
res: \'data.0\'
},
tip: \'上传的文件不超过1M\',
// 上传的方法
action: \'/upload-file\'
},
]
},
imgForm: {
imgUrl: []
//展示上传后信息
// imgUrl:[
// { "label": "avue@226d5c1a_image.png", "value": "/images/logo-bg.jpg" },
// {"label": "avue@226d5c1a_video.png", "value": \'https://www.w3school.com.cn/i/movie.ogg\'}
// ],
},
上传的一些方法的实现
//删除已经上传的文件 uploadDelete(column, path) { //参考 https://blog.csdn.net/qq_41976264/article/details/107762239 console.log(column, path); let url = path.url; if (url) { let splitter = "/file/"; let split = url.split(splitter); let element = split[1]; let pathUrl = element.split("/"); let id = pathUrl[0]; let fileName = pathUrl[1]; return new Promise((resolve, reject) => { this.$confirm(`是否确认删除名称为${fileName}`, "提示", { confirmButtonText: "确 定", cancelButtonText: "取 消", type: "warning" }).then(() => { // 重点来了这里操作完以后一定一定要resolve出去,因为这样avue会将原来的数据给清除 如果不resolve,那么再添加图片的话 他会把得到的路径与之前的拼接成一个字符串用“,”分割 axios.post(\'/file/delete\', {id: id}); //返回的是否成功状态,都无法使用,默认会返回成功!! resolve() }).catch(() => { // 这里也一定一定要reject,虽然不搞 看似好像没问题 保险起见还是给写上,毕竟我不想再爬坑了 哈哈哈 reject(); this.$message({ type: \'info\', message: \'已取消删除\' }) }) }) } }, uploadBefore(file, done, loading, column) { console.log(file, column); // 如果你想修改file文件,由于上传的file是只读文件,必须复制新的file才可以修改名字,完后赋值到done函数里,如果不修改的话直接写done()即可 // var newFile = new File([file], {type: file.type}); // done(newFile) done(); }, uploadError(error, column) { this.$message.error(\'上传失败\'); console.log(error, column) }, uploadAfter(res, done, loading, column) { // 该位置拼接有问题 console.log("===============uploadAfter================");
// 后端需直接返回name=“xxxx” url=“xxxx” 才行,可以看avue官网的上传 F12 中看network 就可以看到她的返回格式
// 刚开始我以为可以直接进行 imgUrL 的push 无论怎么使用,都是有问
// 多个文件的上传,在 propsHttp 配置为 res: \'data.0\' 就会多次调用uploadAfter方法,进行对图片,文件的回显操作
done(); // this.$message.success(\'上传后的方法\') }, //上传后进行点击预览 uploadPreview(file, column, done) { console.log(file, column); //默认执行打开方法 done(); },
玩的时候感觉挺坑的,写的时候又觉得好像没啥东西。。。瞎写写,如有打扰,请回避