vue中form组件中上传el-upload（单、多附件上传，以及上传回显以及编辑不出现等问题）

看到了网上有很多的相关帖子，关于el-upload使用的说明，但总感觉有点散落，特此详细说明相关的使用，如有异议，希望海涵：

如下所示，首先在form组件中使用；

<el-form-item label="附件" prop="accessorList">
			  <el-upload
		  	          v-model="form.accessorList"
		  	          style="display: inline-block;float: left;"
		  	          :action="uploadUrl"
		  	          :on-success="handleFileSuccess"
		  	          :on-remove="handleFileRemove"
		  	          :on-error="handleFileError"
		  	          :file-list="fileList"
					  :on-preview="handlePreview"
		  	          :multiple="false"
		  	          :limit="5">
		  	    <el-button size="small" type="primary">点击上传</el-button>
		  	  </el-upload>
		  	</el-form-item>

其中:limit就是限制你最大能上传几个附件，此处设置为5；

先说说相应上传文件的函数：在return里面添加fileList: []回显用到； uploadUrl就是上文的action，对应你上传的后端接口地址；

data(){
   return{

             fileList: [],//上传文件列表
           uploadUrl: `${process.env.VUE_APP_BASE_API}/equipment/upload`,
     }
}

下面就是对应上传中的函数：

  handleFileSuccess(response, file, fileList) {
		  debugger
        this.fileList = fileList;  
      },
      handleFileRemove() {
        this.fileList = [];
      },
      handleFileError() {
        this.$message.error("上传失败！");
      },

大家疑惑的就是这个FileList 到底是什么:，看下图：

debugger调试看到filelist里面的参数，这个就是你回显的时候需要有的信息，

包含你上传之后返回的地址路径，配置成文件的信息，这样就能回显，编辑的时候保证filelist中有值就可，下面看看多文件上传之后的filelist长啥样：

这是上传后的；现在看看fileList,里面包含四个0，1，2，3这四个文件

 这就是回显的诀窍所在；删除将fileList=[],就可以了，编辑的时候你只要保证你的fileList里面有值就可以了，不知道说清楚没有，反正最核心的就是你要搞定fileList，一切就解决了，如果有什么问题联系我，私信就好。