vue upload上传图片压缩

最新推荐文章于 2024-07-15 17:59:29 发布

原创最新推荐文章于 2024-07-15 17:59:29 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一个Vue组件Upload，如何通过before-upload钩子函数限制上传的图片类型，并使用image-conversion库在文件大小超过限制时进行精确压缩。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
      <div>
        <Upload
          type="drag"
          name="file"
          :show-upload-list="false"
          :before-upload="beforeUpload"
          :on-success="handleUploadSuccess"
          action="/xx/upload"
        >
          <div style="padding: 60px; background: #f2f2f2">
            <Icon type="ios-cloud-upload" size="50" style="color: #3399ff"></Icon>
            <p>上传照片</p>
          </div>
        </Upload>
      </div>
  </div>
</template>
<script>
import * as imageConversion from 'image-conversion'
export default {
  name: 'Upload',
  },
  methods: {
    beforeUpload (file) {
      if (file.type !== 'image/png' && file.type !== 'image/jpg' && file.type !== 'image/jpeg') {
        this.$Message.error('只能上传照片')
        return false
      }
      return new Promise((resolve) => {
        let check = file.size / 1024 < 200 // 判定图片大小是否小于200KB
        if (check) {
          resolve(file)
        } else {
          imageConversion.compressAccurately(file, 200).then(res => {
            res = new File([res], file.name, { type: res.type, lastModified: Date.now() })
            resolve(res)
          })
        }
      })
    }
  }
}