#html程式碼
<p class="bg_white">
<p class="content_mission">
<span>我的任务<span style="padding: 0;"> ( 1 )</span></span>
<span></span>
<span id="myMission" class="mui-icon mui-icon-arrowright" @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 class="img" style="width: 100%; height: 100%; position: absolute;top:0;left:0;z-index: 9;" :src="image" />
<a href="javascript:void(0);" style="position: absolute;top: -30px; right: 0;z-index: 10;color: red;" >
<span class="mui-icon mui-icon-close" @click='delImage($index)'></span>
</a>
</li>
</ul>
</p>
<p>
<p v-if="!image">
<input type="file" @change="onFileChange">
</p>
<p v-else>
<img :src="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 style="width: 100%; height: 100%; position: absolute;top:0;left:0;z-index: 9;" :src="image" />
<a href="javascript:void(0);" style="position: absolute;top: -30px; right: 0;z-index: 10;color: red;" >
<span class="mui-icon mui-icon-close" @click='delImage($index)'></span>
</a>
</li>
</ul>
</p>
<p>
<p v-if="!image">
<input type="file" @change="onFileChange">
</p>
<p v-else>
<img :src="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，所以第二個是不會有圖的。可以用傳參數的方式來判斷要往哪個變數裡面傳。
JS代碼