vue基于vant实现图片上传

Posted 2022-12-10 水星记_

前言

图片上传的功能相信大家再熟悉不过了，实现的方式也有很多，今天教大家在 vue 中用 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>

---

实现效果图

- 拓展延伸

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

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