avue-form 文件上传

时间:2024-03-08 11:35:52
 

背景

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

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