element-ui实现图片压缩上传

23 篇文章 0 订阅

需求来源

我发现 ,其实在做图片上传的时候就应该考虑到图片压缩上传的问题,element-ui在上传一个大的图片时浏览器会报错,当然也并没有提供相关的属性跟方法去进行图片的压缩,这个时候就需要我们自己去想办法实现,当然实现图片的压缩其实网上很多方法,但是有一个插件早已把风阀给封装好,我们拿来即用就好。

image-conversion

npm i image-conversion -S	
  • 页面引入
import * as imageConversion from 'image-conversion' 
  • 查看element-ui文档我们可以发现
    在这里插入图片描述

    我们可以在promise的方式去进行图片的处理,也就是在图片上传之前进行处理
// 上传之前
handleBeforeUpload(file) {
  return new Promise((resolve, reject) => {
    // 得到文件类型,如:img,png,gif....
    this.loading = true
    const type = file.name.substring(file.name.lastIndexOf(".") + 1, file.name.length).toLowerCase()
    const isType = this.dataInfo.options.types.includes(type)
    const isLt2M = file.size / 1024 / 1024 <= Number(this.dataInfo.options.fileSize)
    if (!isLt2M) {
      this.$message.error(`文件大小不能超过${this.dataInfo.options.fileSize}M!`)
    }
    if (!isType) {
      this.$message.error(`只允许上传${this.dataInfo.options.types.join(",")}格式的文件`)
    }

    if (!(isLt2M && isType)) {
      this.loading = false
    }

    // 如果允许上传,然后判断一下大小是否超过4M,如果不超过4M就不进行压缩
    if (isLt2M && isType) {
      if (file.size / 1024 / 1024 < 4) {
        resolve(file)
      } else {
        if (this.fileType !== 'pdf') {
          imageConversion.compressAccurately(file, 1000).then(res => {
            resolve(res)
          }).catch(() => {
            this.loading = false
            this.$message.error('图片压缩失败,请联系管理员进行查看!')
            reject()
          })
        }
      }
    } else {
      reject()
    }
  })
},

灵魂代码其实就是下面这一段

imageConversion.compressAccurately(file, 1000).then(res => {
  resolve(res)
}).catch(() => {
  this.loading = false
  this.$message.error('图片压缩失败,请联系管理员进行查看!')
  reject()
})
好的,针对您的问题,以下是实现 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 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' 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 'vue-image-crop-upload' export default { components: { VueImageCropUpload }, data() { return { uploadUrl: 'xxx', // 上传地址 uploadHeaders: { // 上传请求头 Authorization: 'Bearer ' + getToken() }, size: 1024 * 1024 * 2, // 上传图片大小限制 accept: '.jpg,.jpeg,.png', // 上传图片格式限制 cropConfig: { // 图片裁剪配置 aspectRatio: 1 / 1, autoCropArea: 1, viewMode: 1, zoomable: false, guides: false, dragMode: 'move', cropBoxResizable: false, crop: () => {} }, compressConfig: { // 图片压缩配置 targetSize: 1024 * 1024, // 目标大小 quality: 0.7, // 压缩质量 mimeType: 'image/jpeg' // 输出格式 } } }, 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('upload', compressedFile) // 触发上传事件 } } } } </script> ``` 4. 完成上传 在父组件中监听上传事件,使用 axios 或其他方法上传文件至服务器: ```vue <template> <div> <upload :action="uploadUrl" @upload="handleUpload"></upload> </div> </template> <script> import axios from 'axios' import Upload from './Upload.vue' export default { components: { Upload }, data() { return { uploadUrl: 'xxx' // 上传地址 } }, methods: { handleUpload(file) { const formData = new FormData() formData.append('file', file) axios.post(this.uploadUrl, formData).then(response => { console.log(response.data) }) } } } </script> ``` 以上就是实现 Vue+Element-UI上传图片并压缩的基本步骤,您可以根据您的具体需求进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值