<template>
<div>
<div v-for="(item,index) in picture" :key="item.id" class="box_uploader">
<div @click="gainId(index)">
<el-upload
class="uploader_diyi"
action="123"
:show-file-list="false"
:http-request="upload"//利用自己的方法上传
:before-upload="beforeAvatarUpload">//上传前压缩一下照片
<div class="zhuanquanquan">
<i class="el-icon-plus avatar-uploader-icon"></i>
<p>{{item.title}}</p>
</div>
</el-upload>
<div class="img_up">
<el-image
v-if=" item.pic != ''" //不等于空的时候 显示图片
style="width: 100%; height: 100%"
:src="GLOBAL.BASE_URL + item.pic" //‘GLOBAL.BASE_URL （http://192.68.1.1...）’这个是我写的一个全局域名可以忽略
:preview-src-list="getImgList(index)">
</el-image>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
srcList:[],//点击看大图
currentId:'',//下标
picture:[
{id:0,title:'门头照片',pic:''},
{id:1,title:'前台照片',pic:''},
{id:2,title:'团队照片',pic:''},
],
},
methods: {
//通过点击获得下标位置
gainId(i){
this.currentId = i
},
//上传照片
upload(file){
const loading = this.$loading({
lock: true,
text: '上传中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
const formData = new FormData();
formData.append('file',file.file);
formData.append('end_of_lifeVehiclesId',this.currentId);
formData.append('w',500);
formData.append('h',500);
var this_ = this
//this.changeData（），是我写的一个全局调用ajax的方法 可以直接写 axios.post（）
this.changeData('upload/img',formData,function(res){
loading.close();
this_.picture[this_.currentId].pic = res.data.data //接口返回的图片链接
this_.srcList[this_.currentId] = res.data.data
})
},
//以此打开查看大图
getImgList(index){
let arr = JSON.parse(JSON.stringify(this.srcList))
for(let i=0;i<index;i++){
arr.push(arr[0]);
arr.splice(0,1);
}
return arr
},
//视频上传前进行压缩
beforeAvatarUpload(file) {
return new Promise((resolve, reject) => {
compress(file).then(res=>{ // 压缩方法在后面
resolve(res)
})
}).then(res=>{
if(res == 0) {
this.$message({showClose: true,duration:1500,message: '图片大小不能小于15像素',type: 'error'});
return reject()
}else{
return res
}
})
},
}
}
</script>
<style lang="scss" scoped>
</style>
这里是写了一个数组对象进行循环的，因为就3张。所有没有写3个上传的方法
利用这样的方法进行了 循环上传并且以此点开大图
