html
<template>
<div class="g-c-66 pro-pic inner-upload">
<div v-for="file, index in previewFiles" :key="index" class="img-box" style="border: 1px solid #dddddd;width: 140px;float: left;">
<el-upload
class="avatar-uploader"
ref="uploader"
name="image"
list-type="picture-list"
:accept="accept"
:action="uploadUrl"
:show-file-list="false"
:before-upload="createBeforeAvatarUploadHandler(index)"
:on-success="createHandleAvatarSuccessHandler(index)"
:on-error="handleAvatarFail"
:with-credentials="true"
>
<div v-if="file.url">
<img :src="file.url" class="avatar">
<span slot="trigger" class="g-c-eff changeBtn">更换</span>
</div>
<i v-else class="el-icon-plus avatar-uploader-icon">
<span>点击上传</span>
</i>
</el-upload>
<span v-if="file.url" class="g-c-eff deleteBtn" @click.prevent="delHandler(index)">删除</span>
</div>
</div>
</template>
js
<script>
export default {
name: "uploadImg",
data() {
return {
previewFiles: [{ url:'' }, { url:'' }, { url:'' }, { url:'' }, { url:'' }, { url:'' }],
}
},
computed:{
uploadUrl() {
//process.env.BASE_API 请求地址
return process.env.BASE_API + '/upload/img';
},
accept(){
return 'jpeg,jpg,png,bmp'
}
},
methods: {
createBeforeAvatarUploadHandler(i) {
return (file) => {
if (!file) {
return false;
}
let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
let fileSize = file.size;
let isImage = false;
for (let mimeType of this.accept.split(',')) {
if (mimeType === testmsg) {
isImage = true;
break
}
}
if (!isImage) {
this.$message.error('上传图片必须是JPG/PNG/BMP 格式!');
return false;
}
if (fileSize > 1024 * 1024) {
this.$message.error('上传头像图片大小不能超过 1MB!');
return false;
}
return true;
};
},
createHandleAvatarSuccessHandler(i) {
return (res) => {
const code = _get(res, 'code');
if (code !== 1) {
this.$message.error('上传失败');
return;
}
const url = _get(res, 'data');
if (!url) {
this.$message.error('上传异常');
return;
}
this.previewFiles[i].url = url;
this.saveInfo();
}
},
handleAvatarFail(res) {
console.log('upload fail: ' + res);
},
delHandler(i) {
this.previewFiles[i].url = '';
this.saveInfo();
},
async saveInfo() {
const honorFile = this.previewFiles.map(f => f.url).join('|');
try {
await updateCompany({ HonorFile: honorFile });
this.$message.success('更新成功');
} catch (e) {
this.$message.error(e.message);
}
},
}
}
</script>
css
<style scoped>
.inner-upload{
margin-top: 10px;
height: 190px;
}
.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%);
}
.img-empty{
vertical-align: sub;
margin-top: 10px;
margin-bottom: 10px;
}
.deleteBtn{
position: absolute;
bottom: -26px;
left: 85px;
cursor: pointer;
}
.changeBtn{
position: absolute;
bottom: -24px;
left: 25px;
}
.pro-pic .avatar-uploader .el-upload {
cursor: pointer;
position: relative;
/*overflow: hidden;*/
}
.inner-upload .el-upload{
width: 140px;
height: 140px;
position: relative;
}
</style>