vue中form组件中上传el-upload(单、多附件上传,以及上传回显以及编辑不出现等问题)
看到了网上有很多的相关帖子,关于el-upload使用的说明,但总感觉有点散落,特此详细说明相关的使用,如有异议,希望海涵:如下所示,首先在form组件中使用;<el-form-item label="附件" prop="accessorList"><el-uploadv-model="form.accessorList"style="display: inline-block;
·
看到了网上有很多的相关帖子,关于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,一切就解决了,如果有什么问题联系我,私信就好。
更多推荐
已为社区贡献3条内容
所有评论(0)