vue 项目使用 图片压缩

}

},

data() {

return {

path: path

}

},

computed: {

…mapGetters(‘user’, [‘userInfo’, ‘token’]),

showImageUrl() {

return (this.imageUrl && this.imageUrl.slice(0, 4) !== ‘http’) ? path + this.imageUrl : this.imageUrl

}

},

methods: {

beforeImageUpload(file) {

const isJPG = file.type === ‘image/jpeg’

const isPng = file.type === ‘image/png’

if (!isJPG && !isPng) {

this.$message.error(‘上传头像图片只能是 jpg或png 格式!’)

return false

}

const isRightSize = file.size / 1024 < this.fileSize

if (!isRightSize) {

// 压缩

const compress = new ImageCompress(file, this.fileSize, this.maxWH)

return compress.compress()

}

return isRightSize

},

handleImageSuccess(res) {

// this.imageUrl = URL.createObjectURL(file.raw);

const { data } = res

if (data.file) {

this.$emit(‘change’, data.file.url)

this.$emit(‘on-success’)

}

}

}

}

utils代码：

<el-upload

:action=“${path}/fileUploadAndDownload/upload”

:headers=“{ ‘x-token’: token }”

:show-file-list=“false”

:on-success=“handleImageSuccess”

:before-upload=“beforeImageUpload”

:multiple=“false”

压缩上传