好的，针对您的问题，以下是
实现 Vue+
Element-UI上传图片并压缩的基本步骤：
1. 安装依赖
在项目中安装
Element-UI 和插件
vue-image
-crop
-upload 以及
图片压缩库，可使用以下命令：
```
npm install
element-ui vue-image
-crop
-upload compressjs
--save
```
2. 引入
Element-UI
在 main.js 中引入
Element-UI：
```
javascript
import
Vue from &#
39;
vue&#
39;
import
ElementUI from &#
39;
element-ui&#
39;
import &#
39;
element-ui/lib/theme
-chalk/index.css&#
39;
Vue.use(
ElementUI)
```
3. 使用
vue-image
-crop
-upload
在需要
上传图片的组件中使用
vue-image
-crop
-upload，可使用以下代码：
```
vue
<template>
<div>
<
vue-image
-crop
-upload
ref="upload"
:url="uploadUrl"
:headers="uploadHeaders"
:size="size"
:accept="accept"
:beforeUpload="beforeUpload"
:cropConfig="cropConfig"
:compressConfig="compressConfig"
@input="handleInput"
@crop
-success="handleCropSuccess"
>
<el
-button size="small" type="primary">
上传图片</el
-button>
</
vue-image
-crop
-upload>
</div>
</template>
<script>
import
VueImageCropUpload from &#
39;
vue-image
-crop
-upload&#
39;
export default {
components: {
VueImageCropUpload },
data() {
return {
uploadUrl: &#
39;xxx&#
39;, //
上传地址
uploadHeaders: { //
上传请求头
Authorization: &#
39;Bearer &#
39; + getToken()
},
size: 1024 * 1024 * 2, //
上传图片大小限制
accept: &#
39;.jpg,.jpeg,.png&#
39;, //
上传图片格式
限制
cropConfig: { //
图片裁剪配置
aspectRatio: 1 / 1,
autoCropArea: 1,
viewMode: 1,
zoomable: false,
g
uides: false,
dragMode: &#
39;move&#
39;,
cropBoxResizable: false,
crop: () => {}
},
compressConfig: { //
图片压缩配置
targetSize: 1024 * 1024, // 目标大小
quality: 0.7, // 压缩质量
mimeType: &#
39;image/jpeg&#
39; // 输出格式
}
}
},
methods: {
beforeUpload(file) { // 文件
上传前的回调函数
this.$refs.upload.startUpload()
},
handleInput(file) { // 文件选择后的回调函数
this.$refs.upload.showCrop()
},
handleCropSuccess(blob, file) { //
图片裁剪成功后的回调函数
this.compressImage(blob, file) // 压缩
图片
},
compressImage(blob, file) { //
图片压缩
const reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = (e) => {
const base64 = e.target.result
const compressedBlob = Compress.compress(base64, this.compressConfig)
const compressedFile = new File([compressedBlob], file.name, { type: compressedBlob.type })
this.$emit(&#
39;upload&#
39;, compressedFile) // 触发
上传事件
}
}
}
}
</script>
```
4. 完成
上传
在父组件中监听
上传事件，使用 axios 或其他方法
上传文件至服务器：
```
vue
<template>
<div>
<upload :action="uploadUrl" @upload="handleUpload"></upload>
</div>
</template>
<script>
import axios from &#
39;axios&#
39;
import Upload from &#
39;./Upload.
vue&#
39;
export default {
components: { Upload },
data() {
return {
uploadUrl: &#
39;xxx&#
39; //
上传地址
}
},
methods: {
handleUpload(file) {
const formData = new FormData()
formData.append(&#
39;file&#
39;, file)
axios.post(this.uploadUrl, formData).then(response => {
console.log(response.data)
})
}
}
}
</script>
```
以上就是
实现 Vue+
Element-UI上传图片并压缩的基本步骤，您可以根据您的具体需求进行修改和优化。
本文介绍了如何使用Vue和Element-UI组件el-upload实现多张图片上传，并在before-upload方法中进行图片大小限制。当需要更换已上传图片时，使用clearFiles清空文件列表以达到预览和上传新图片的效果。同时，展示了通过FileReader和httpRequest自定义预览图片的方法。
最低0.47元/天 解锁文章
扫一扫
2150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
