vue如何回显已上传的文件并且修改

我们知道当我们在表单里面上传多个文件时，我们希望将多个文件和表单中的对象一起传给后端，这时我们传给后端的文件就是file数组。而我们想要回显已上传的文件，应该是拿不到那个file数组的，所以我们可以让后端返回给我们之前上传的多个文件的信息，比如说id,文件名字等。

在这里定义一个上传组件，重新给我封装一下数据

<el-form-item>
          <el-upload
            class="upload-demo"
            action="#"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :file-list="UploadedfileList">
            <h2>{{ $t("lang.portaldata.uploadedFileList") }}</h2>
          </el-upload>
        </el-form-item>

data里面定义一下

UploadedfileList:[],

　　点击修改按钮的时候给它赋一下值

getFileList(this.dataId).then(res=>{
                  
                  if(res.code == 200){
                    this.UploadedfileList = res.rows
                    console.log("返回的文件",this.UploadedfileList)
                    for(let one of this.UploadedfileList){
                      one.name = one.fileName
                    }
                    
                  }
                }).catch()

　　当我们想要删除回显的文件列表时，定义一下删除方法

handleRemove(file, fileList) {
              console.log(file, fileList);
              
              fileList = fileList.filter((item)=>{
                
                  return item.name !== file.name;
              }); 
            },
            
            beforeRemove(file, fileList) {
              if (this.$i18n.locale == "zh") {
                return this.$confirm(`确定移除 ${ file.name }？`);
              } else if (this.$i18n.locale == "en") {
                return this.$confirm(`are you sure delete ${ file.name }？`);
              }
              
            },

这样的话我们就可以回显已上传的文件列表。但是这些回显的文件是只能删除不能增加的，可以将修改之后的id给后端，比如说"1,2,3"这样的格式，然后后端去判断对比数据库中已上传文件的id然后手动删除。

用户点击修改按钮不光想回显已上传的文件，可以还想新增文件，所以我们在上面那个回显已上传文件的组件旁边再定义一个组件，这个传给后端的就是file数组了

<el-form-item  prop="files">
            <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-change="uploadFiles"
            :multiple="true"
            :file-list="fileList"
            >
            <div v-for="filename in fileList">{{filename}}</div>
            
            <el-button size="mini" type="primary" icon="el-icon-upload2"
                >{{ $t('lang.information.UDF')}}
            </el-button>
            </el-upload>
        </el-form-item>

定义一下on-change方法

uploadFiles (item,fileList) {
              this.form.files = fileList
              console.log("打印上传文件详情",fileList)
              
            },

　　提交的时候把数组中的file对象拿到封装到数组里面

if(this.form.files != null){

                        this.form.files.forEach(file => formData.append('files', file.raw))

                      }

后端controller用files就能接收到了

@RequestParam(value = "files", required = false) MultipartFile[] files