<template>
<div>
<el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="abc">
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
imageUrl: "",
};
},
methods: {
beforeAvatarUpload(file) {
console.log(file);
this.imgName = file.name;
this.nowFile = file;
},
abc(data) {
this.imageUrl = URL.createObjectURL(data.file);
this.getBase64(data.file).then((resBase64) => {
// console.log(resBase64);
this.$axios.post("https://www.zzgoodqc.cn/index.php/index/upload/uploadimg", { imgurl: resBase64 }).then((res) => {
console.log(res.data);
});
});
},
getBase64(file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
let fileResult = "";
reader.readAsDataURL(file); //开始转
reader.onload = function () {
fileResult = reader.result;
}; //转 失败
reader.onerror = function (error) {
reject(error);
}; //转 结束 咱就 resolve 出去
reader.onloadend = function () {
resolve(fileResult);
};
});
},
},
};
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
vue2上传图片
于 2023-06-27 21:00:00 首次发布