vue 图片上传组件

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

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设定可以上传图片的大小
  
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值