话不多说,直接上代码
组件uploadImg.vue放在components下,代码如下
<template>
<div v-loading="uploadingImgLoading" class="pic_container">
<input
ref="nativeInput"
type="file"
style="display: none"
accept="image.png,image.gif"
@change="verificationPicFile"
/>
<div class="avatar-uploader">
<img
@click="chooseFile"
v-if="isShowImage"
:src="imageUrl"
class="avatar avatar_box club_hover_ponter"/>
<div
v-if="!isShowImage"
@click="chooseFile"
class="avatar-uploader-icon club_hover_ponter">
<i class="el-icon-plus avatar-uploader-icon"></i>
</div>
<div class="updata_img_pic_txt" v-if="!isShowImage">上传图片</div>
<p class="pic-note">文件大小不超过1M <br />支持jpg、jpeg、png、gif、bmp格式</p>
</div>
</div>
</template>
<script>
import { uploadFile, downImg } from "@/api/index";
export default {
name: "ImportImg",
props: {
getImgData: {
type: Object,
default() {
return {
imageUrl: "",
isShowImage: false,
};
},
},
},
data() {
return {
setTimer: null,
imgKey: "",
imageUrl: "",
picFileName: "",
importImgReturn: {},
timer: null,
fileList: [],
isShowImage: false,
uploadingImgLoading: false,
};
},
watch: {
getImgData: {
handler: function (val) {
console.log(val);
},
deep: true,
},
},
methods: {
importImgClick() {
const vm = this;
vm.chooseFile();
},
verificationPicFile(event) {
const vm = this;
vm.fileList = Array.from(event.target.files);
var fileSize = 0;
var fileMaxSize = 1024; //1M
var filePath = event.target.files;
if (filePath) {
fileSize = event.target.files[0].size;
var size = fileSize / 1024;
if (size > fileMaxSize) {
vm.$message({ message: "文件大小不能大于1M!", type: "warning" });
return false;
} else if (size <= 0) {
vm.$message({ message: "文件大小不能为0M!", type: "warning" });
return false;
} else {
var fileTypes = [".png", ".jpg", ".PNG", ".gif", ".GIF"];
var filePathName = event.target.files[0].name;
if (filePathName) {
var isNext = false;
var fileEnd = filePathName.substring(filePathName.indexOf("."));
for (var i = 0; i < fileTypes.length; i++) {
if (fileTypes[i] == fileEnd) {
isNext = true;
break;
}
}
if (!isNext) {
vm.$message({ message: "不接受此文件类型", type: "warning" });
return false;
} else {
vm.importFile();
}
} else {
return false;
}
}
} else {
return false;
}
},
chooseFile() {
this.$refs.nativeInput.click();
},
importFile() {
const vm = this;
vm.uploadingImgLoading = true;
try {
uploadFile({
filename: vm.fileList[0],
}).then((res) => {
if (res.status === 200 && res.data) {
vm.isShowImage = true;
vm.importImgReturn = res.data.data;
vm.picFileName = res.data.data.key;
vm.$refs.nativeInput.value = null;
vm.sendParentImg();
vm.uploadingImgLoading = false;
vm.$message({ message: "图片上传成功", type: "success" });
// vm.imageUrl = 接口返回地址
downImg({
filename: res.data.data.key,
}).then((data) => {
if (data) {
vm.imageUrl = window.URL.createObjectURL(data.data);
}
});
}
});
} finally {
}
},
sendParentImg() {
const vm = this;
vm.$emit("getImportImg", {
fileList: vm.fileList,
imgPath: vm.picFileName,
obj: vm.importImgReturn,
});
},
},
};
</script>
<style lang ="scss">
.pic_container {
display: inline-block;
font-size: 14px;
// img
.pic-note {
font-size: 12px;
color: rgba(106, 107, 116, 1);
height: 16px;
line-height: 15px;
margin-top: 5px;
}
.avatar-uploader .el-upload {
cursor: pointer;
position: relative;
overflow: hidden;
border: 1px dashed #d9d9d9;
border-radius: 6px;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
background-color: rgba(250, 250, 250, 1);
font-size: 28px;
color: gray;
width: 166px;
height: 96px;
line-height: 80px;
text-align: center;
border: 1px dotted gray;
border-radius: 4px;
.iconfont {
font-size: 52px !important;
}
}
.avatar {
width: 166px;
height: 96px;
display: block;
overflow: hidden;
}
.avatar_box {
border: 1px dashed #d9d9d9;
}
.updata_img_pic_txt {
position: absolute;
color: rgba(101, 103, 122, 1);
line-height: 16px;
top: 63px;
left: 55px;
font-size: 14px;
}
}
</style>
页面内直径引入组件使用即可
import UploadImg from '@/components/uploadImg/uploadImg'
<upload-img @getImportImg="getImportImg" :get-img-data="sendImgData"/>
getImportImg(res){
const vm = this;
if(res){
vm.ruleForm.logoPic = res.imgPath;
}
}