vant 图片上传处理压缩

最新推荐文章于 2024-10-30 14:43:23 发布

左手牵♪♡右手

最新推荐文章于 2024-10-30 14:43:23 发布

阅读量670

点赞数 1

分类专栏： vant 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45102212/article/details/121465334

版权

本文记录了一种使用Vant进行图片上传并处理压缩的前端实现方式，虽然不是最优解，但作为初步方案值得参考，后续将继续优化。

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

不是最好的代码和方法，先记录一下在改进一下：

<template>
  <div style="margin: 10px 0px 0px 0px">
    <van-uploader
      :deletable="false"
      :show-upload="true"
      upload-text="请选择上传"
      :accept="accept"
      :max-size="20 * 1024 * 1024"
      :after-read="afterRead"
      multiple
      :before-read="beforeRead"
      @oversize="onOversize"
    >
      <van-button icon="photo" style="margin-right: 15px" size="small" type="warning">请上传文件</van-button>
    </van-uploader>
    <div slot="tip" class="el-upload__tip" style="color: #909399; font-weight: 400; margin: 8px 8px">
      支持.doc,.docx,.xls,.xlsx,.ppt,.pdf,image/* 文件，且不超过20MB
    </div>
    <div class="list" v-for="(item, index) in fileList&