vue基于vant实现图片上传

Posted 水星记_

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue基于vant实现图片上传相关的知识,希望对你有一定的参考价值。

前言

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


用到的属性和方法

属性

参数描述类型
before-read文件读取前的回调函数,返回 false 可终止文件读取,支持返回 PromiseFunction
v-model已上传的文件列表FileListItem[]
after-read文件读取完成后的回调函数Function
max-count文件上传数量限制number/string
max-size文件大小限制,单位为 bytenumber/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 ]

以上是关于vue基于vant实现图片上传的主要内容,如果未能解决你的问题,请参考以下文章

vue+vant webApp图片上传和编辑时图片回显

vue+vant webApp图片上传和编辑时图片回显

Vue项目实战——基于 Vue3.x + Vant UI实现一个多功能记账本(登录注册页面,验证码)

vue3、vant 中 ImagePreview 图片预览

使用 vant 的 v-lazy 实现图片 vue 在移动端的懒加载

基于vue-Ant实现图片上传