avue-form 文件上传

 

背景

好久没写博客了，最近在玩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();
            },

玩的时候感觉挺坑的，写的时候又觉得好像没啥东西。。。瞎写写，如有打扰，请回避