vue+elementUI 实现图片上传预览功能

准备工作：你需要一个后台接口，你传文件给他，他返回一个图片在线链接。ok，开干！

用到的是elmentUI里的el-upload,先去看官网例子。我用到的是图片列表

先把html的框架copy过来，然后根据自己的需求取取舍内容。这个直接复制粘贴的事情，耐心的elemntUI的官网，不要急躁哈

<el-uploadref="placeImg"action="/"accept="image/*":file-list="datalist":http-request="httpRequest"        //自定义上传接口:on-preview="handlePictureCardPreview" list-type="picture"         //列表以图片的形式展示
><el-buttonsize="small"type="primary">点击上传</el-button>
</el-upload>

最重要的就是:http-request 了，这里写的函数，就是你接口在的地方。:http-request的函数自己就有一个参数，这个参数就是你上传的图片，或者文件信息。

httpRequest(file) {    var fd = new FormData() //构造一个 FormData，把后台需要发送的参数都添加进去fd.append('multipartFile', file.file) //传文件fd.append('参数一', '01')fd.append('参数二', '01')this.$axios.post('接口URL', fd).then((response) => {console.log(response)}}).catch((error) => {console.log(error)})},

然后！一定！注意！给后台接口传参数的时候，记得把你的所有的参数用formdata包起来，有几个就写几个，都写进去，然后传参的时候，把你的formdata直接传就行了，不然，你要是直接传file，接口就会报错。如果你出现了以下报错信息，就是和我遇到一样的问题了

基本上就是这个参数传的不对，卡了我好久，因为实在太菜了，不知道问题出在哪里。这个写对了就成功一大半了。

上传成功，elmentUI自己就有一个列表样式，如果不想要，可以自己在html那里跟着自己写一个ul，记得要把elemntUI自带的那个隐藏掉。

<ul class="showImg"><li v-for="(item, index) in 图片数组" :key="index"><el-imageref="Img":src="item.url":preview-src-list="预览图片数组"></el-image>
//el-image自带一个点击图片查看大图的事件<p>{{ item.name }}</p><div class="upload-opera"><divclass="view"//写上这个，点击按钮的时候，和图片上的点击事件一样@click="() => $refs.Img[0].clickHandler()"></div><divclass="delete"@click="() => {图片数组.splice(index, 1)预览图片数组.splice(index, 1)}"></div></div></li></ul>

预览列表里我弄了两个数组，一个就是图片数组，里面不光放了图片，还放了图片的名字，另一个是预览图片数组，elmentUI在预览的时候，需要一个只放图片链接的数组，所以我就单独弄了一个。这两个数组都是在函数里面放进去的，函数会返回你上传图片的详情信息的。

预览的效果就和官网一样了。

可放大可缩小，你的预览图片数组里面有多个值，还可以上下翻动，这个还是挺好用的。

小菜鸟终于搞完了上传图片，应该还有可以提升和简化代码的地方，先记录下来现在这个，以后再学习更多。主要就是卡在不会上传这里，数据拿formdata处理一下，就好了。搞清楚 el-upload 里面的参数都是些什么意思，就好了。

vue+elementUI 实现图片上传预览功能相关推荐

JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
js实现图片上传预览功能
js实现图片上传预览功能很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片 <body><input type="file"><img s ...
js图片上传预览功能
最近项目中用到的图片上传前预览功能,兼容IE6-9,FF <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
vue图片上传预览功能
效果图 html结构 <ul class="gallery-window-map" style="flex-wrap:wrap;"><!--点 ...
如何实现上传多个图片并依次展示_js前端实现多图图片上传预览的两个方法(推荐)...
一.将图片转成icon码的实现方式 html代码: js代码 //图片预览功能 function previewImage(file,imgNum) { var MAXWIDTH = 200; var ...
Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
java 图片上传预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...

vue+elementUI 实现图片上传预览功能

vue+elementUI 实现图片上传预览功能相关推荐

最新文章

热门文章