vue upload上传图片

前几天做到一个关于图片上传功能，图片编辑和删除功能，和大家分享一下，

在vue的基础上引入element-ui，利用element中的upload的上传功能。

代码

<el-upload class="upload-demo"action="上传的地址"list-type="picture-card":limit='5'  // 上传图片的个数:auto-upload="false":on-exceed='uploadOverrun'  // 判断上传的个数:on-preview="handleContImgPreview"   // 点击文件列表中已上传的文件时的钩子:on-remove='handleRmove' // 文件列表移除文件时的钩子:http-request='submitUpload' // 上传时的请求的接口:file-list="fileList"ref="upload"
><i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" :close-on-click-modal="false"><img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<el-button @click='submitAssess'>提交到服务器</el-button> // 提交的服务器

编辑图片的时候需要将后台的返回给你的数据通过拼接的形式显示在页面上
更多功能在官网

this.dialogImageUrl = []; // 存放图片路径的数组
this.fileName = '';
this.a.img.forEach((item) => { // this.a是后台编辑时返回给你的数据this.dialogImageUrl.push('地址' + item.'后台返回的地址');this.fileName += item.'后台返回的地址'+ ','; // 由于返回的是多个图片，所以要拼接起来
})
var imgList = [];
for (var i = 0; i < this.dialogImageUrl.length; i++) {imgList.push(this.dialogImageUrl[i]);
}
this.fileList = imgList.map((ele) => { // 最后将数据给fileLislet item = {};item.url = ele;return item;
})

这样就可以编辑显示的图片了
最后就是删除功能了，主要是配合后台传递当前要删除的数据给后台。
本文是转载
源地址

vue upload上传图片相关推荐

vue 项目 upload上传图片并实现拖拽排序
upload 上传图片并实现拖拽功能 1.npm i -S vuedraggable 2.//页面引入 import draggable from "vuedraggable" c ...
Vue+Element-UI 上传图片，打开相机，相册
Vue+Element-UI 上传图片,打开相机,相册 Element-UI中提供的Upload组件,是用来上传文件用的,并没有单独的纯用来上传图片的组件,所以,在部分浏览器(手机)中,打开后会发现是 ...
前端vue+element-ui上传图片至七牛，并返回外链URL至后台
前端vue+element-ui上传图片至七牛,并返回外链URL至后台上传文件到七牛云代码 2019/08/12 上传文件到七牛云注册登陆到七牛云,需要认证信息才能创建个人存储空间; 注册等步骤 ...
带你用VUE实现上传图片效果
摘要:在逛b站时看到一个上传图片的效果,想着可以自己也做一个,因为原作者是用原生js写的,那我不如就用vue写好了,当然,是一个很小的东西,在HTML文件直接引用vue就好了,详细步骤如下~ 本文分享 ...
vue里面怎么删除部分页面_基于VUE选择上传图片并页面显示（图片可删除）
基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件: HTML文本内容: 相关照片 JS文本内容: /** * 从 file 域获取本地图片 url */ fun ...
vue+elementUI上传图片
vue+elementUI上传图片笔记总结有裁剪框上传图片组件: <template slot="iconForm"><el-uploadclass=&quo ...
vue+element上传图片到阿里云（可直接运行domo）
vue+element上传图片到阿里云,OSS(最简单,最详细,可在线运行domo),不要走弯路了支持格式 jpeg,jpg,png,webp,gif =可限制大小== 4M 安装ali-oss n ...
layui上传文件php上传接口异常,layui.upload上传图片报错“请求上传接口出现异常”...
layui.upload上传图片报错"请求上传接口出现异常"且接口报404问题在调试layui.upload上传图片时候报错"请求上传接口出现异常": 且接口 ...
antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...

vue upload上传图片

vue upload上传图片相关推荐

最新文章

热门文章