前端-实现多个el-upload操作及其回显

实现多个el-upload操作及其回显

摘要：

翻阅了大量关于el-upload相关的资料，发现还没实现多个el-upload上传的文章，刚好项目有这功能需求（纯属多余的功能，bug多，仅供参考）

此方法是添加多个上传控件，每个控件限制上传一个文件

<div  v-for="(fileFormData, index) in fuFileList" :key="index">
    <el-input v-model="fileFormData.id" placeholder="" class="inp-llll":disabled="true"></el-input>  
       <el-button type="danger" size="mini" @click="delete(index,fileFormData)"><i class="el-icon-delete-solid"></i>删除</el-button>
         <el-form-item label="上传资源文件" prop="uploading">
         <el-upload
         class="upload-demo"
          drag
          multiple
          :file-list="fileFormData | zhuanhua"  //传的是对象作处理
          :on-success="function (res, file){return onSuccess(res, file, index)}"
          :before-upload="function (res, file){return beforeUpload(res, file, index)}"
          :limit="1"
          action="调用方法不过多赘述">
   <div class="el-upload__text">只允许上传一个文件，<em>点击上传</em></div>
               </el-upload>
               </el-form-item>
				 <el-button type="primary" @click="addfuFile(id)"><i class="el-icon-circle-plus"></i>添加一个附件上传 </el-button>
                </el-form>
                    </el-row>
                </div>
<script>
	//上传控件中的 :file-list 是一个数组，但是我们从数据库中取出来得只是一个路径，所以要处理一下返回数组
    Vue.filter('zhuanhua', function (value) {
        if (!value.file) {
            return ""
        }
        return [{name:value.title,url:value.file}]
    })
    let pop = new Vue({
        el: "#nav",
        data() {
            return {
                filePath: [],
                fuFileList:[],
            }
        },
        methods: {
            //点击修改内容时，回显上传内容
            getFile(){
                const _this = this;
                $.ajax({
                    url:url
                    type: 'get',
                    contentType: "application/json",
                    success: function (res) {
                    		//回显多个上传控件
                            _this.fuFileList = res.data;
                    },
                    error: function (res) {
                    }
                })
            },

            //此方法是读取数据库的数据,点击修改内容，该控件要回显已上传的路径绑定的是:file-list,是一个数组 比如[{name:你好,url:uplpad/../../},{name:啊哈哈哈,url:upload/jitang.excel},{name:鸡汤,url:...}]
            getMyFile() {
                const _this = this;
                    $.ajax({
                        url: url,
                        type: 'get',
                        contentType: "application/json",
                        success: function (res) {
                                _this.fileList = res.data.data;   
                        },
                        error: function (res) {
                        }
                    })
            },
           //成功后回调
            onSuccess(res, file, index){
           // index就是下标值，this.filePath定义为数组，传的是对象
                this.filePath[index]={file};
                进行添加操作时拿此filePath,具体路径console.log打印下
            },
            // 上传前
            beforeUpload(file){
				//具体有何作用未发掘
            },
            //添加附件上传 (控制台会报filelist的错，因为就是filelist要求是数组，而我们传的是只是一条路径信息,但是不影响，在回显的时候已经通过vue.filter作处理了)
            addfuFile(id){
                this.fuFileList.push({id:''});
            },
        },
    })

</script>
</html>

温馨提示

1点击删除上传控件时，有好几种情况，回显内容作修改，删除已经上传过的控件，需要判断通过id是否存在来确认是已经上传好的 还是刚添加的，删除已经上传好的需要拿id去数据库删除。

2表单添加时，要拿的是成功后回调的filePath的路径，而表单回显内容作修改，要拿的是fuFileList对象里的数据进行保存。

3这个需求总感觉有很多地方很难考虑的清楚，还是别用的好。比如在修改时，可能会发生新添加上传控件，又有删除已上传的控件，亦或者删除回显上传控件中的文件。此时更新数据，可能会导致路径不对版的情况。

4自我感觉唯一有用的也就回显的操作。

大家有任何问题都可以发出来谈论下。