<div class="g-c-66 pro-pic inner-upload">
<div class="img-box" v-for="(file,index) in addedPreviewFile" :key="index">
<el-upload
class="avatar-uploader"
action="#"
ref="uploader"
name="upfile"
:accept="accept"
:show-file-list="false"
:http-request="handleAvatarChange(index)"
:before-upload="beforeAvatarUpload(index)"
>
<div v-if="file.url">
<img :src="file.url" class="avatar" ref="proPic" id="pro-pic">
<span slot="trigger" class="g-c-eff changeBtn">更换</span>
</div>
<i v-else class="el-icon-plus avatar-uploader-icon">
<img src="../../../assets/img/pic.png" alt="" class="img-empty"><br>
<span>点击上传</span>
</i>
</el-upload>
<a class="g-c-eff deleteBtn" v-if="file.url" @click="deleteImg(index)">删除</a>
</div>
<div class="notic-box g-mt-10" v-show="showImgNotice" ref="quantity"><em
class="font_family icon-alert g-mr-5"></em>至少上传一张图片
</div>
</div>
addedPreviewFile: [{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''}],
computed: {
accept() {
return 'image/jpeg,image/jpg';
},
},
beforeAvatarUpload(index) {
return (file) => {
if (!file) {
return
}
let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
const isLt1M = file.size / 1024 / 1024 < 1;
if (testmsg !== 'jpg' && testmsg !== 'jpeg') {
this.$message.error('上传图片只能是 JPG 格式!');
this.addedPreviewFile[index].url = ''
return false;
}
if (!isLt1M) {
this.$message.error('上传图片不能超过1M!');
this.addedPreviewFile[index].url = ''
return false;
}
}
},
/*上传阿里云*/
handleAvatarChange(index) {
return (file) => {
const form = new FormData()
uploadImg().then(res => {
form.append('policy', _get(res, 'data.policy'))
form.append('OSSAccessKeyId', _get(res, 'data.accessid'))
form.append('signature', _get(res, 'data.signature'))
form.append('key', `${_get(res, 'data.dir')}${_get(res, 'data.key')}${'_'}${this.time}${'.jpg'}`)
form.append('success_action_status', 200)
form.append('file', file.file)
this.$http.post(process.env.OSS_URL, form).then(result => {
if (result.status == 200) {
this.addedPreviewFile[index].url = URL.createObjectURL(file.file)
let url = (process.env.OSS_URL + '/' + `${_get(res, 'data.dir')}${_get(res, 'data.key')}${'_'}${this.time}${'.jpg'}` + '?fr=upload')
this.updateImg.push(url)
} else {
this.$message.error('上传失败!')
}
})
}).catch(e => {
console.log(e)
})
}
},
/*删除图片*/
deleteImg(index) {
this.addedPreviewFile[index].url = '';
this.updateImg[index] = ""
},
.inner-upload {
margin-top: 10px;
height: 172px;
margin-left: 10px;
}
.inner-upload .el-icon-plus:before {
content: "";
}
.inner-upload .avatar-uploader-icon {
color: #888888;
width: 140px;
height: 140px;
text-align: center;
vertical-align: middle;
display: table-cell;
text-align: center;
/*overflow: hidden;*/
font-size: 12px;
}
.inner-upload .avatar {
/* width: 140px;
height: 140px;*/
display: block;
object-fit: scale-down;
}
.inner-upload #pro-pic {
width: 136px;
height: 136px;
display: block;
object-fit: scale-down;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
<style>
.inner-upload .el-upload {
width: 140px;
height: 140px;
position: relative;
}
</style>
网友评论