:file-list el-upload
时间: 2023-11-02 15:58:14 浏览: 434
vue element upload组件 file-list的动态绑定实现
el-upload组件中的:file-list属性是用来设置已经上传的文件列表的显示。根据引用中的描述,最初误以为file-list中放置的是前端导入的文件,导致上传不成功。经过排查,发现需要获取file-list中的raw属性进行保存,因为raw属性才是真正的文件。在引用中的main.js中,导入了一个名为UploadImg的组件,该组件在页面中使用了el-upload组件并设置了:file-list属性。具体的使用可以参考引用中的页面代码,其中el-form-item标签下使用了el-image组件来显示上传的图片,并通过v-for循环渲染imgList数组中的数据。每次上传图片成功后,通过@get-url事件将图片的URL添加到imgList数组中。同时,在点击删除图片按钮时,通过@click事件从imgList数组中移除对应的图片数据。这样,通过控制imgList数组的长度来限制最多上传3张图片。
总结:
:file-list是el-upload组件中用于设置已上传文件列表显示的属性,imgList数组用于保存上传成功的图片URL,@get-url事件用于添加图片URL到imgList数组中,@click事件用于删除对应的图片数据。
阅读全文