Vue+UpLoad实现上传预览和删除图片的实践

1、用vue+Element完成一个图片上传、点图预览、加删除功能，如图：

2.首先我们再组件中引入这一段代码，每个属性的使用也都放在这里了：

<el-upload
  class="upload-demo"
  action=""//引号里面填要上传的图片地址，用接口的话是公共的接口地址拼接一个图片的接口
  :on-preview="handlePreview"//图片已经上传完成时点击触发（钩子函数）
  :on-remove="handleRemove"//点击右上角X号触发的钩子函数
  :on-success="handleSuccess"//上传成功的一个钩子函数
  :file-list="fileList"//上传的文件列表
  list-type="picture"//上传的文件类型，有三个参数，分别是text/picture/picture-card，分别是文本类型、图片类型、卡片类型。个人推荐选第二个较好
  :headers="headerObj"//图片上传的时候需要请求头部，我们可以定义一个变量，设置获取token信息，如下代码:
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

//存放token的变量
 headerObj: {
        Authorization: window.localStorage.getItem("token"),
      },

3.接下来就是它的on-preview属性，我们可以用它来实现图片预览

先要设一个图片预览的弹框：

  <el-dialog
      title="图片预览"//上方的标题
      :visible.sync="previewDialogVisible"//控制显示隐藏的变量
      width="50%"//弹框的宽度占比
    >
        //img标签中的src属性接受的是点击预览时传递的图片地址
      <img :src="picPreviewPath" alt="" class="previewImg" />
    </el-dialog>

再进行逻辑操作

  // 处理图片预览
    handlePreview(file) {//会得到一个参数，这是返回的图片的一些信息，主要的是图片的url
      this.picPreviewPath = file.response.data.url;//把url参数赋值给这个变量
      this.previewDialogVisible = true;//再让弹框显示
    },

3.然后来实现点击删除图片，这时候用到了on-remove这个属性

 // 处理移除图片的操作
    handleRemove(file) {
      // 1.获取将要删除图片的临时路径
      const filePath = file.response.data.tmp_path;
      // 2.从pics数组中，找到图片对应的索引值
      const i = this.addForm.pics.findIndex((x) => x.pic === filePath);
      // 3.调用splice方法，移除图片信息
      this.addForm.pics.splice(i, 1);
    },

4.前面的功能都实现了的话，到这时候你已经成功了一半了，若项目需要提交添加的图片，则用到了它的on-success属性。

 // 监听图片上传成功事件
    handleSuccess(response) {
      // 1.拼接得到一个图片信息对象 临时路径
      const picInfo = { pic: response.data.tmp_path };
      // 2.将图片信息对象，push到pics数组中
      this.addForm.pics.push(picInfo);
    },

5.文章小提示：

1.别忘了给需要设置成动态属性的属性加上v-bind

2.在data中注册需要绑定的变量

到此这篇关于Vue+UpLoad实现上传预览和删除图片的文章就介绍到这了,更多相关Vue UpLoad 上传预览和删除图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中element 的upload组件发送请求给后端操作

    1.用到了before-upload属性, 用于在上传文件前的校验,并且发送请求给后端,传输格式进行文件流传输 什么都不用设置,action属性随便设置,不能为空即可! 在before-upload属性的方法中的代码如下: var _this = this; debugger; // var files=file.target.files[0]; debugger; const isJPG = file.type === "image/jpeg"; const isLt2M = fil

  • vue2.0 使用element-ui里的upload组件实现图片预览效果方法

    1.首先我们在cli中引入element-ui 2.然后在具体的代码中放入uoload组件 <el-upload class="upload-demo" action="" :auto-upload='false' :on-change='changeUpload'> <el-button size="small" type="primary">点击上传</el-button> <di

  • 解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题

    我要实现的功能是在上传文件之前校验是否表格中存在重复的数据,有的话,需要弹窗提示是否覆盖,确认之后继续上传,取消之后,就不再上传. 项目中用的element-ui是V1.4.3 <el-upload class="upload-demo" drag ref="fileUpload" :action="urls.fileUpload" :on-success="handleUploadSuccess" :on-error=

  • vue-cli3.0+element-ui上传组件el-upload的使用

    最近项目中涉及很多文件上传的地方,然后文件上传又有很多限制.比如文件大小限制,文件个数限制,文件类型限制,文件上传后的列表样式自定义,包括上传进度条等问题.下面是我对element-ui的上传组件的一些改造, 点击查看源码. 我是自己维护了一个列表数据,再对这个列表数据进行一些操作,没用组件自带的.先看看我的组件模版 <template> <el-upload class="upload-demo" :limit="limit" :action=&

  • vue element upload实现图片本地预览

    vue使用element实现本地预览,最主要的是将图片路径转换为base64,供大家参考,具体内容如下 HTML <el-upload class="avatar-uploader" action="123" //这个路径不重要,可以随便写 :show-file-list="false" :on-success="handleAvatarSuccess" :on-change="onchange" :

  • vue element upload组件 file-list的动态绑定实现

    本文解决,upload组件 file-list的动态绑定list1,list2 ...,实现动态添加,相信很多电商后台管理系统都会遇到这个需求,例子如下 本例,我是使用的upload默认的上传地址(很多图片不能上传,你可以在本地截几张图片,进行测试),我可以上传多张活动图片,可以加相应的,名称,链接描述等,如果有多个活动,可以点击添加活动,在第二个活动又能添加相应的内容,保存完之后,可以实现回显,活动详情页可以看到添加的几个活动和相应的活动内容. 实现方法不为一,这是一种特别简单的.代码如下 <

  • Vue2.0结合webuploader实现文件分片上传功能

    Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么搞得那么麻烦,用分片上传? 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度. 当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件.另外分片传输能够更加实时的跟踪上传进度. 实现后的界面: 主要是两个文件,封装的上传组件和具体的ui页面,上传组件代码下面有列出来

  • Vue上传组件vue Simple Uploader的用法示例

    Vue上传组件vue Simple Uploader的用法示例

    在日常开发中经常会遇到文件上传的需求,vue-simple-uploader 就是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件,自带 UI,可覆盖.自定义:先来张动图看看效果: 其主要特点就是: 支持文件.多文件.文件夹上传 支持拖拽文件.文件夹上传 统一对待文件和文件夹,方便操作管理 可暂停.继续上传 错误处理 支持"快传",通过文件判断服务端是否已存在从而实现"快传" 上传队列管理,支持最大并发上传 分块上传 支持进度.预估剩

  • vue使用el-upload上传文件及Feign服务间传递文件的方法

    一.前端代码 <el-upload class="step_content" drag action="string" ref="upload" :multiple="false" :http-request="createAppVersion" :data="appVersion" :auto-upload="false" :limit="1&quo

  • Vue+UpLoad实现上传预览和删除图片的实践

    Vue+UpLoad实现上传预览和删除图片的实践

    1.用vue+Element完成一个图片上传.点图预览.加删除功能,如图: 2.首先我们再组件中引入这一段代码,每个属性的使用也都放在这里了: <el-upload class="upload-demo" action=""//引号里面填要上传的图片地址,用接口的话是公共的接口地址拼接一个图片的接口 :on-preview="handlePreview"//图片已经上传完成时点击触发(钩子函数) :on-remove="handl

  • layui实现图片虚拟路径上传,预览和删除的例子

    效果如下所示: 前端: <style type="text/css"> #detailTbody tr:hover { background: #fff; } .layui-form-label { width: 110px; } .uploader-list { margin-left: -15px; } .uploader-list .info { position: relative; margin-top: -25px; background-color: blac

  • 基于JQuery实现图片上传预览与删除操作

    本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码,经测试目前满足谷歌.火狐.360.IE6,7,8,9,10,11等浏览器,供大家参考,具体内容如下 1. preview.2.0.html <!DOCTYPE html> <html> <head> <title>上传图片预览</title> <meta http-equiv="content-type" content="text/html;

  • vue实现图片上传预览功能

    vue实现图片上传预览功能

    本文实例为大家分享了vue实现图片上传预览的具体代码,供大家参考,具体内容如下 效果图 html结构 <ul class="gallery-window-map" style="flex-wrap:wrap;"> <!--点击上传按钮--> <li class="house-pic-item" v-if="!(!item.isNew&&editBtnType[index])" @c

  • Vue+SSM实现图片上传预览效果

    Vue+SSM实现图片上传预览效果

    现在的需求是:有一个上传文件按钮,当我们点击按钮时,可以选择需要上传的文件,确定后图片显示在界面上. 说明:本项目前端使用的Vue,后台用的SSM搭建的,服务器是Tomcat,数据库是MySQL 实现思路: 前端界面:当用户点击上传文件按钮,选中待上传图片并点击确认后,这时应该把图片数据传给后台.当后台经过处理后返回结果,前端在根据响应结果做后续工作. 后端:后台拿到前端传过来的数据时,将图片文件存到固定的文件夹下(这个问题是我思考了很久的,我认为应该存在服务器下,原先我是存在本地文件夹下,然后

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • vue excel上传预览和table内容下载到excel文件中

    excel上传预览 这里会用到 npm i element-ui npm i xlsx 在vue的template中写上,排版和css看个人需求 <div> 选择文件 <input type="file" d="file_input" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadshe

  • H5手机端多文件上传预览插件

    H5手机端多文件上传预览插件

    基于zepto,支持多文件上传,进度和图片预览,用于手机端. (function ($) { $.extend($, { fileUpload: function (options) { var para = { multiple: true, filebutton: ".filePicker", uploadButton: null, url: "/home/MUploadImg", filebase: "mfile",//mvc后台需要对应的

  • weui框架实现上传、预览和删除图片功能代码

    jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间. jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用.无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用.既是你的项目是一个有很悠久历史的老项目,也几乎可

  • 模拟QQ心情图片上传预览示例

    模拟QQ心情图片上传预览示例

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以下插件,在别的图片上传功能说不定各位能用的上. 1.jQuery File Upload Demo地址:http://blueimp.github.io/jQuery-File-Upload/ 优点是使用jquery进行图片的异步上传,可控性好,可根据自己的需求任意定制: 缺点是在IE9等一些浏览器

随机推荐