vue基于vant实现图片上传

前言

图片上传的功能相信大家再熟悉不过了，实现的方式也有很多，今天教大家在 vue 中用 vant 组件库实现这个简单的操作。

---

用到的属性和方法

属性

方法

---

实现思路

其实 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

---

实现效果图

- 拓展延伸

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

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