Skip to content
Permalink
v2.5.3beta
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
104 lines (91 sloc) 1.99 KB
<template>
<div>
<el-upload
:action="`${path}/fileUploadAndDownload/upload`"
:headers="{ 'x-token': userStore.token }"
:show-file-list="false"
:on-success="handleImageSuccess"
:before-upload="beforeImageUpload"
:multiple="false"
>
<el-button size="small" type="primary">压缩上传</el-button>
</el-upload>
</div>
</template>
<script setup>
import ImageCompress from '@/utils/image'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'
const emit = defineEmits(['on-success'])
const props = defineProps({
imageUrl: {
type: String,
default: ''
},
fileSize: {
type: Number,
default: 2048 // 2M 超出后执行压缩
},
maxWH: {
type: Number,
default: 1920 // 图片长宽上限
}
})
const path = ref(import.meta.env.VITE_BASE_API)
const userStore = useUserStore()
const beforeImageUpload = (file) => {
const isJPG = file.type === 'image/jpeg'
const isPng = file.type === 'image/png'
if (!isJPG && !isPng) {
ElMessage.error('上传头像图片只能是 jpg或png 格式!')
return false
}
const isRightSize = file.size / 1024 < props.fileSize
if (!isRightSize) {
// 压缩
const compress = new ImageCompress(file, props.fileSize, props.maxWH)
return compress.compress()
}
return isRightSize
}
const handleImageSuccess = (res) => {
const { data } = res
if (data.file) {
emit('on-success', data.file.url)
}
}
</script>
<script>
export default {
name: 'UploadImage',
methods: {
}
}
</script>
<style lang="scss" scoped>
.image-uploader {
border: 1px dashed #d9d9d9;
width: 180px;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.image-uploader {
border-color: #409eff;
}
.image-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.image {
width: 178px;
height: 178px;
display: block;
}
</style>