看到了网上有很多的相关帖子,关于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,一切就解决了,如果有什么问题联系我,私信就好。

Logo

前往低代码交流专区

更多推荐