Element-UI与Iview中的多个图片预览并通过点击事件上传

要完成通过点击事件统一上传图片,并后台要求图片以数组格式传给后台,但是Element-UI与Iview的文档中只有直接上传并且是单个图片上传的例子,所以在这里自己做个笔记,以防止以后会用到:下面是已经做完的实例

Element-UI与Iview中的多个图片预览并通过点击事件上传_第1张图片

下面是用的iview写的,用element-ui也可以完成;

Element-UI与Iview中的多个图片预览并通过点击事件上传_第2张图片

图片预览的时候,是可以点击查看图片并删除的,所以这里有2个事件(点击预览和删除),另外上图中的uploadList这个只是用来保存预览图片的,并不是上传图片的

Element-UI与Iview中的多个图片预览并通过点击事件上传_第3张图片

当然对应的模态框的设置和样式如下:

Element-UI与Iview中的多个图片预览并通过点击事件上传_第4张图片

Element-UI与Iview中的多个图片预览并通过点击事件上传_第5张图片

好了  样式到此为止,接下来是上传的问题,首先要在Form表单中设置好上传文件的属性

然后在点击上传按钮的时候

Element-UI与Iview中的多个图片预览并通过点击事件上传_第6张图片

最后通过点击确定按钮,发给后台

最后通过点击确定按钮,发给后台

Element-UI与Iview中的多个图片预览并通过点击事件上传_第7张图片

就可以把多个图片以数组的形式统一上传了

你可能感兴趣的:(vue,Element-UI)