vue 图片上传组件

最新推荐文章于 2026-05-05 09:10:07 发布

原创

最新推荐文章于 2026-05-05 09:10:07 发布 · 7k 阅读

标签

#压缩 #批量上传图片 #图片上传 #vue组件

收录于

本文介绍了一个Vue图片上传组件，该组件支持批量和单张图片上传，并能控制图片大小和数量。借助mint-ui库，组件还实现了图片压缩功能。通过监听'MAX'和'multiple'参数来控制上传限制，使用自定义事件'fileChange'将处理后的文件数据传递给父组件，以便进一步通过AJAX等方式提交给后端。

vue图片上传组件

vue图片上传组件，实现批量上传和单张上传功能，控制图片大小，数量，以及压缩处理，利用了mint-ui的提示框
监听两个参数，分别是MAX控制最多上传的数量，multiple控制是否批量上传，self.$emit(‘fileChange’, {base64, file, files});将处理后的数据通过自定义事件传递给父组件，父组件获取到压缩处理后的文件就可以使用AJAX等技术post给后台实现文件上传功能

<template>
  <div>
    <input ref="file"
           type="file"
           class="file-input"
           accept="image/*"
           :multiple="multiple"
           @change="change"/>
  </div>
</template>

<script>
  import {Indicator, MessageBox} from 'mint-ui';
  //  M设定可以上传图片的大小
  const M =