让图片上传变得更简单：vue和vant的完美融合

前言

当今互联网时代，图片上传已经成为了很多应用场景中必不可少的一部分，比如社交平台、电商平台等。而基于 vue 框架的 vant 组件库，为我们提供了一种简单、快捷地实现图片上传功能的方法。本文将介绍如何使用 vant 组件库实现图片上传功能，帮助大家快速实现自己的图片上传需求。

---

用到的属性和方法

属性

参数	描述	类型
before-read	文件读取前的回调函数，返回 false 可终止文件读取，支持返回 Promise	Function
v-model	已上传的文件列表	FileListItem[]
after-read	文件读取完成后的回调函数	Function
max-count	文件上传数量限制	number/string
max-size	文件大小限制，单位为 byte	number/string/(file: File) => boolean

方法

事件名	描述
oversize	文件大小超过限制时触发
delete	删除文件预览时触发

---

实现思路

其实 vant 已经将上传组件完善的很全面了，我们只需要去调用它的事件或者使用它的属性，将基础的上传组件做改动适配自己的需求就可以了；实现思路核心在于上传图片时创建一个空对象实例，然后再调用 append() 方法添加数据，最后请求接口，将处理好的参数(流)传递给后台即可。

---

完整代码

<template>
  <div>
    <!--// 上传组件 //-->
    <van-uploader @oversize="onOversize" @delete="deleteClzp" :before-read="beforeRead" :after-read="clzpAfterRead" v-model="fileList"
      :max-count="1" :max-size="5 * 1024 * 1024" />
  </div>
</template>

<script>
import { uploadFiles, deleteFiles } from "../../api/enforcement"; //引入上传、删除接口
export default {
  data() {
    return {
      fileList: [], //上传的文件列表
      clzpfilePath: "", //删除所需参数
    };
  },
  methods: {
    //校验上传图片大小
    onOversize(file) {
      console.log(file);
      this.$toast("文件大小不能超过5MB");
    },
    //校验图片的格式
    beforeRead(file) {
      if (!/(jpg|jpeg|png|JPG|PNG)/i.test(file.type)) {
        this.$toast("请上传正确格式的图片");
        return false;
      }
      return true;
    },
    //照片上传事件方法
    clzpAfterRead(file) {
      // 上传状态提示开启
      file.status = "uploading";
      file.message = "上传中...";
      // 创建一个空对象实例
      let formData = new FormData();
      // 调用append()方法添加数据
      formData.append("file", file.file);
      uploadFiles(formData).then((res) => {
        if (res.code == "10000") {
          // 上传状态提示关闭
          file.status = "done";
          this.$toast("上传成功！");
          this.clzpfilePath = res.data.relativePath; //删除所需参数
        }
      });
    },
    //照片删除事件方法
    deleteClzp() {
      // filePath：删除所需的参数
      deleteFiles({ filePath: this.clzpfilePath }).then((res) => {
        if (res.code == "10000") {
          this.$toast("删除成功！");
        }
      });
    },
  },
};
</script>

---

实现效果图

---

多个上传

有同学可能要问了，那如果有多个上传，要写 n 个上传的方法吗，其实不用，我们只需要将上传方法改造一下，然后传递不同的参数进行区分即可，如下：

<template>
  <div class="overBox">
    <div class="upImgBox">
      <p>上报图片1</p>
      <div class="uploaderBox">
        <van-uploader @oversize="onOversize" @delete="(file, detail) => commondeleteClzp(file, detail, 'baxxPthoto')"
          :before-read="beforeRead" :after-read="(file, detail) => commonuploadFiles(file, detail, 'baxxPthoto')" v-model="form.baxxPthoto"
          :max-count="2" :max-size="5 * 1024 * 1024" accept="image/*" />
      </div>
    </div>
    <div class="upImgBox">
      <p>上报图片2</p>
      <div class="uploaderBox">
        <van-uploader @oversize="onOversize" @delete="(file, detail) => commondeleteClzp(file, detail, 'xgghpPhoto')"
          :before-read="beforeRead" :after-read="(file, detail) => commonuploadFiles(file, detail, 'xgghpPhoto')" v-model="form.xgghpPhoto"
          :max-count="2" :max-size="5 * 1024 * 1024" accept="image/*" />
      </div>
    </div>
    <div class="upImgBox">
      <p>上报图片3</p>
      <div class="uploaderBox">
        <van-uploader @oversize="onOversize" @delete="(file, detail) => commondeleteClzp(file, detail, 'zzsPhoto')"
          :before-read="beforeRead" :after-read="(file, detail) => commonuploadFiles(file, detail, 'zzsPhoto')" v-model="form.zzsPhoto"
          :max-count="2" :max-size="5 * 1024 * 1024" accept="image/*" />
      </div>
    </div>
    <div class="bonBomTwoBox">
      <van-button block type="info" @click="confirmOn">确定</van-button>
    </div>
  </div>
</template>
<script>
import { uploadFiles, deleteFiles } from '@/api/publicApi' //上传、删除接口
export default {
  data() {
    return {
      // 提交信息
      form: {
        baxxPthoto: [],
        xgghpPhoto: [],
        zzsPhoto: []
      }
    }
  },
  methods: {
    // 提交
    confirmOn() {
      console.log(this.form)
    },
    //校验图片的格式
    beforeRead(file) {
      if (!/(jpg|jpeg|png|JPG|PNG|gif|GIF)/i.test(file.type)) {
        this.$toast('请上传正确格式的图片')
        return false
      }
      return true
    },
    //校验上传图片大小
    onOversize(file) {
      this.$toast('文件大小不能超过5MB')
    },
    //现场照片上传
    commonuploadFiles(file, detail, name) {
      let formData = new FormData()
      formData.append('file', file.file)
      this.form[name].splice(detail.index, 1)
      uploadFiles(formData).then(res => {
        if (res.code == '10000') {
          this.form[name].push({ url: res.data.realPath })
        } else if (res.code != '10000') {
          this.$toast('网络异常，请重新上传')
        }
      })
    },
    // 删除方法
    getDelUrl(url) {
      let delurl = ''
      if (url) {
        let arr = url.split('file-ydzf-app') //删除传参：截取file-ydzf-app后面的
        if (arr.length) {
          delurl = arr[1]
        }
      }
      return delurl
    },
    // 删除
    commondeleteClzp(file, detail, name) {
      let urlStr = this.getDelUrl(file.url)
      this.form[name].splice(detail.index, 0)
      deleteFiles({ filePath: urlStr }).then(res => {
        if (res.code == 10000) {
          this.$toast('删除成功！')
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.overBox {
  padding: 10px;
  background: white;
}
.upImgBox {
  padding: 10px 0px 10px 0px;
  border-bottom: 1px solid rgb(233, 234, 234);
  display: flex;
  align-items: center;
  margin: 0px 16px;
  font-size: 14px;
  font-weight: bold;
  color: #000f32;
}
.uploaderBox {
  margin-left: 10px;
}
::v-deep .van-uploader__file {
  width: 60px;
  height: 60px;
}
</style>

---

控制台打印

实现效果图

拓展延伸

使用 vant 上传组件，编辑页面回显图片

// isImage 属性可判断是否是图片
this.fileList= [{ url: '图片地址', isImage: true }]

---

相关推荐

⭐ element表格上传图片必看：如何避免全行上传？
⭐ vue开发者必看！基于element实现文件上传功能的完整教程
⭐ 小程序开发攻略：如何优雅地实现图片上传？