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();
            },

玩的時候感覺挺坑的，寫的時候又覺得好像沒啥東西。。。瞎寫寫，如有打擾，請回避