Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）

最近有使用vue+elementUI实现多图片上传的需求，遂做此纪录。
本次主要写一下前端的实现细节，至于后台以Multipart[ ]数组接收即可，不再赘述，网上一搜大把文章可供参考。
本次使用elementui的上传图片控件的照片墙类型，其使用示例可具体查看官方文档

Elementui 多图上传控件

需要注意的是，官方文档中的示例采用自动上传的方式，大多数情况我们是需要点击上传按钮或和表单一起提交才开始上传的（即手动上传），此时官方的示例就不满足我们的需求了。怎么办？当然是自己动手丰衣足食啦！！！
进入正题实现后以及上传保存成功后的效果如图

实现代码

这里有几个属性需要注意一下（敲黑板！！！）

因为本次采用手动上传所以需要把action属性置为空，上传的url我们在点击确定时再传给控件的方法
multiple：表示支持多图上传
auto-upload：表示自动上传此处需要设置为“true”(原因下面重点讲)
accept表示允许上传的图片后缀（填写好后点击选择图片的按钮时，浏览器会过滤掉不属于这些后缀的图片。如需要多个值用“，”隔开）
list-type：图片显示样式，可以参考官方文档
file-list:图片回显的文件列表
before-upload:上传前执行的方法，可以在这里检查图片的类型、大小等
http-request:该方法会携带一个content参数使用其属性content.file可以获取到将要上传的文件对象
on-preview:触发图片预览时的方法
on-exchange:图片列表更改时触发的方法，该方法携带（file,fileList）两个参数，file表示刚刚新增到图片列表的文件，fileList表示此时的文件列表
on-remove:表示删除图片时触发的方法同样携带（file,fileList）两个参数
on-exceed：方法表示上传的列表长度超过限制时触发的方法，前提是设置的limit属性，该属性接收Number类型

接下来说为什么要手动上传还要将”auto-upload“设置为true。
要想上述的before-upload、on-exchange、on-remove等关键方法生效需要把”auto-upload“设置为true

选好了要上传的图片点击上传是不是就ok了？试了一下发现不行，why?我们在选择图片时触发的on-change方法中打印file参数


通过打印发现file参数并不是我们真正想要的对象，仔细观察会看到file对象中还有一个raw对象，此时眼前一亮，这才是我们想要的
笔者的采用的方法是在上传的方法中去遍历上传列表拿到每个对象中的raw对象，然后将拿到的raw对象组成的list传到后台去保存（别忘了Format对象）

如果有其他更好的获取方法还希望多多指点！！！
上传成功后怎么回显呢？
我们知道上传成功后后台会将图片的url返回给我们。我是这么做：把后台但会的url集合再转成file的集合

其中this.form.images即为url的集合
这样就可以成功回显了，还可以继续在上传后的列表再次上传或删除已上传的图片
注意：已经上传了的图片已经不可以再次提交到后台再次上传，这个时候就需要你将已上传的图片过滤掉再上传，可以在上传的时候判断图片的url中包不包含“blob”,如果包含则可以上传，若不包含说明已经上传过了需要过滤掉，此外还需要保持上传的顺序

总结

到此这篇关于Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）的文章就介绍到这了,更多相关vue elementUI多图片上传 回显内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue+elementUi图片上传组件使用详解

    上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息.加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑. upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:non

  • vue+elementUI实现表单和图片上传及验证功能示例

    vue+elementUI实现表单和图片上传及验证功能示例

    本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一

  • vue中使用elementUI组件手动上传图片功能

    Vue框架简介 Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合.是基于MVVM(Model-View-ViewModel)设计思想.提供MVVM数据双向绑定的库,专注于UI层面 使用elementUI上传图片时遇到跨域问题,所以需要自己写一个手动上传图片的方法 代码: html <el-upload class="upload-demo" ref="upload"//绑定ref 清空时会用到 :lim

  • vue+elementUI实现图片上传功能

    本文实例为大家分享了vue+elementUI图片上传的具体代码,供大家参考,具体内容如下 1.html <el-form-item label="图片" prop="logo"> <el-upload name="file" v-if="optype==0" :action="'/upload'" accept=".jpg, .png" list-type="

  • Vue+elementui 实现复杂表头和动态增加列的二维表格功能

    先上完成的效果图:列是根据查询结果增加的 数据格式: 表头的数据取出: data.data.forEach(element => { this.thead.push({ 品名: element.品名, 面取数: element.面取数, LOTNO: element.LOT }); element table中: <el-table-column v-for="(item,index) in thead" :prop="item.LOTNO" :key=

  • vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）

    1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it

  • vue+element-ui+axios实现图片上传

    本文实例为大家分享了vue+element-ui+axios实现图片上传的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples<

  • Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录. 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考. 本次使用elementui的上传图片控件的照片墙类型,其使用示例可具体查看官方文档 Elementui 多图上传控件 需要注意的是,官方文档中的示例采用自动上传的方式,大多数情况我们是需要点击上传按钮或和表单一起提交才开始上传的(即手动上传),此时官方的示例就不满足我们的需求了.怎么办?当然是自己动手丰衣足食啦

  • vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)

    vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)

    目录 需求 实现需求 1.利用on-preview+window.open()实现简易版预览效果 2.封装组件实现更完整的上传完成.预览功能 追加关于问的比较多的问题回复 1.imgsrc路径 2.显示原本elementui的那个上传样式 3.file.response显示没有这个属性和方法 4.https://view.officeapps.live.com/op/view.aspx?src=${data}是干嘛的?预览PDF需要安装其他的插件吗? 总结 需求 最近在做vue2.0+eleme

  • VUE+element-ui文件上传的示例代码

    VUE+element-ui文件上传的示例代码

    目录 图片上传(ImageCropper) 文件上传(el-upload) 注意 图片上传(ImageCropper) 此前端代码自己封装了文件上传,只需要配置后端接口需求URL以及对应的图片上传成功后的处理函数,后端返回OSS生成的图片访问地址,然后cropsuccess函数将上传成功的图像进行显示. <template> <div class="app-container"> <!-- 讲师头像 --> <el-form-item labe

  • vue+element-ui+axios多文件上传的实现并显示整体进度

    目录 element-ui+axios多文件上传并显示进度 解决element ui多文件上传的问题 业务场景 解决办法 element-ui+axios多文件上传并显示进度 element-ui自带的多文件上传是做成了多文件多次上传,公司有需求需要选取多个文件一次上传全部. 代码部分 <template> <d2-container> <el-form ref="form" :model="formData" label-width=

  • 使用elementUI实现将图片上传到本地的示例

    查阅饿了吗官方文档可以了解上传组件的使用方法.http://element.eleme.io/#/zh-CN/component/upload 前台的页面代码为: <el-upload class="upload-demo" ref="upload" action="http://127.0.0.1:20001/Administration/MediaApiLhUploadHandler" :on-preview="handleP

  • vue实现移动端图片上传功能

    vue实现移动端图片上传功能

    本文实例为大家分享了vue实现移动端图片上传的具体代码,供大家参考,具体内容如下 <template> <div class="box"> <div class="upDiv"> {{labTex}} //标题 //上传按钮 <input ref="uploadInput" type="file" class='upinp' name="file" value=&q

  • Vue移动端实现图片上传及超过1M压缩上传

    Vue移动端实现图片上传及超过1M压缩上传

    本文实例为大家分享了Vue移动端实现图片上传及超过1M压缩上传的具体代码,供大家参考,具体内容如下 1.实现效果 2.代码 Html: <div class="choosePic"> <div class="pics" :style="{backgroundImage: 'url(' + form.erpRecords + ')'}"> <input type="file" class="

随机推荐