<template>
<div>
<el-upload class="pic-uploader-component" :action="$http.adornUrl('/admin/file/upload/element')"
:headers="{Authorization: $cookie.get('Authorization')}" :show-file-list="false" :on-success="handleUploadSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="value" :src="resourcesUrl + value" class="pic">
<i v-else class="el-icon-plus pic-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
resourcesUrl: process.env.VUE_APP_RESOURCES_URL
}
},
props: {
value: {
default: '',
type: String
}
},
methods: {
// 图片上传
handleUploadSuccess(response, file, fileList) {
console.log(2)
this.$emit('input', file.response)
},
// 限制图片上传大小
beforeAvatarUpload(file) {
return new Promise((resolve, reject) => {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
if (!isJPG) {
Message.error('上传图片只能是 JPG、PNG、GIF 格式!');
return reject();
}
const size = file.size / 1024;
if (size > 2048) {
Message.error(`上传图片大小不能超过2048KB!`);
return reject();
}
this.compressImage(file).then(resolve).catch(reject);
});
},
compressImage(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
const img = new Image();
img.src = event.target.result;
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
canvas.toBlob((blob) => {
const compressedFile = new File([blob], file.name, {
type: file.type,
lastModified: file.lastModified
});
resolve(compressedFile);
}, file.type || 'image/png', 0.06);
};
img.onerror = reject;
};
reader.onerror = reject;
console.log(reject)
});
}
}
}
</script>
<style lang="scss">
.pic-uploader-component .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
.pic-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.pic {
width: 178px;
height: 178px;
display: block;
}
}
.pic-uploader-component .el-upload:hover {
border-color: #409EFF;
}
</style>
前台压缩图片在上传vue+element-ui
最新推荐文章于 2023-11-23 08:53:09 发布