javascript - vue上传图片，并显示在页面中的插件

问题描述

html代码<p class='bg_white'>

<p class='content_mission'><span>我的任务<span style='padding: 0;'> ( 1 )</span></span><span></span><span @click='myMission'></span> </p> <p class='mission_list'><ul> <li><span class='mission_img'> <span class='mui-icon mui-icon-plusempty file'><p class='vue-upload-img-multiple'> <p v-if='images.length >0'> <ul><li v-for='image in images'> <img :src='https://www.haobala.com/wenda/image' /> <a href='javascript:void(0);' ><span @click=’delImage($index)’></span> </a></li> </ul> </p> <p> <p v-if='!image'> <input type='file' @change='onFileChange'> </p> <p v-else> <img :src='https://www.haobala.com/wenda/image' /> <button @click='removeImage'>Remove image</button> </p> </p> </p> </span></span><span class='mission_particulars'> <p class='mission_details'><span class='mission_name'>【四带】老带新</span><span class='mission_score'><span>2</span>分</span> </p> <p class='mission_progress'><span>进行中</span></p> <p class='mission_time_evaluation'><span class='mission_time'>2017年6月</span><span class='mission_evaluation'>评价:<span>3</span>人</span> </p></span> </li> <li><span class='mission_img'> <span class='mui-icon mui-icon-plusempty file'><p class='vue-upload-img-multiple'> <p v-if='img.length >0'> <ul><li v-for='image in img'> <img :src='https://www.haobala.com/wenda/image' /> <a href='javascript:void(0);' ><span @click=’delImage($index)’></span> </a></li> </ul> </p> <p> <p v-if='!image'> <input type='file' @change='onFileChange'> </p> <p v-else> <img :src='https://www.haobala.com/wenda/image' /> <button @click='removeImage'>Remove image</button> </p> </p> </p> </span></span><span class='mission_particulars'> <p class='mission_details'><span class='mission_name'>【四带】老带新</span><span class='mission_score'><span>2</span>分</span> </p> <p class='mission_progress'><span>进行中</span></p> <p class='mission_time_evaluation'><span class='mission_time'>2017年6月</span><span class='mission_evaluation'>评价:<span>3</span>人</span> </p></span> </li></ul> </p></p>

js代码

module.exports = {

name: ’Upload’,data: function(){ return {images: [],img:[] }}, onFileChange:function (e) {var dom=e.currentTarget; var files = e.target.files || e.dataTransfer.files; if (!files.length) return;this.createImage(files); }, createImage (file) { var vm = this; var reader = null; var leng = file.length; for (var i = 0; i < leng; i++) { reader = new window.FileReader(); reader.readAsDataURL(file[i]); reader.onload = function (e) { vm.images.push(e.target.result); } } }, removeImage: function (e) { this.images = []; }, delImage: function (index) { this.images.shift(index); }}

};

这个js代码，只能实现第一个图片区域有图，第二个上传图片区没有图

问题解答

第二个遍历的img，但是你的JS代码里面并没有往img里面push图片，而是一直往images里面Push，所以第二个是不会有图的。可以通过传参数的方式来判断往哪个变量里面传。

<p v-if='!image'> <input type='file' @change='onFileChange($event,1)'></p>

JS代码

onFileChange:function (e, index) { const dom = e.currentTarget; const files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.createImage(files, index);},createImage (file, index) { const me = this; for (let i = 0; i < file.length; i++) { const reader = new window.FileReader(); reader.readAsDataURL(file[i]); reader.onload = function (e) { //在这里对index做判断来处理 if (index == 1) {me.images.push(e.target.result); } else { me.img.push(e.target.result); } } }}