vue js
changeImage(e) {
// 上传图片事件
var files = this.$refs.avatarInput.files;
var that = this;
function readAndPreview(file) {
//Make sure `file.name` matches our extensions criteria
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
var reader = new FileReader();
reader.onload = function(e) {
if (that.imgDatas.indexOf(this.result) === -1) {
that.imgDatas.push(this.result);
let form = new FormData();
form.append('file[]',file);
$.ajax({
type:'post',
url:'/test/upload',
data:form,
dataType:"json",
cache:false,
processData:false,
contentType:false,
success(res){
console.log(res)
}
})
}
};
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
if (files.length === 0) {
return;
}
},
upLoad() {
// 触发上传图片按钮
this.$refs.avatarInput.dispatchEvent(new MouseEvent("click"));
}
html
<input type="file" accept="image/*" @change="changeImage($event)" ref="avatarInput" style="display:none">
<div class="pic_list_box">
<div class="pic_list" v-show="imgDatas.length">
<div v-for="(src,index) in imgDatas" :key="index">
<img :src="src" width="80" height="80" alt srcset>
</div>
</div>
<img class="upload_btn" v-show="imgDatas.length!=3" @click="upLoad" src="/images/plus.png" alt>
</div>
css
.pic_list_box {
display: flex;}
.upload_btn {
width: 80px;
height: 80px;
padding-left: 15px;
}
.pic_list {
display: flex;
}
img {
width: 80px;
height: 80px;
padding-left: 15px;
padding-bottom: 10px;
}