Vue2移动端（H5项目）项目基于vant封装图片上传组件（支持批量上传、单个上传、回显、删除、预览、最大上传数等功能）---解决批量上传问题

一、最终效果

在这里插入图片描述

二、参数配置

1、代码示例：

<t-upload
   @fileList="fileList"
    :showFileList="showFileList"
    @showFile="showFile"
    :showFileUrl="showFileUrl"
  />

2、配置参数（TUpload Attributes）继承van-uploader的属性

参数	说明	类型	默认值
limitSize	限制上传文件大小	Number	10MB
fileType	限制上传的文件类型	String	.jpg,.jpeg,.png
totalLimit	最多上传个数限制	Number	5
showFileList	回显文件的list（内含：url–>对应完整路径）	Array	-
showFileUrl	上传组件回显图片–相对路径数据（后台需要）	Array	-
savePath	服务器上传地址	String	自己的上传地址

3、events 事件继承van-uploader的事件

事件名	说明	返回值
fileList	上传成功或删除成功触发	返回最终上传数据
showFile	回显list删除后触发	返回回显上传没有删除的数据

三、具体页面使用

<template>
  <div class="initial_Judgment">
    <div class="img_box">
        <div class="img_title">
          终判图
        </div>
        <t-upload
          :showFileUrl="showFileUrl"
          :showFileList="showFileList"
          @fileList="fileList"
          @showFile="showFile"
        />
      </div>
  </div>
</template>
<script>
export default {
     
     
  name: 'initialJudgment',
  data() {
     
     
    return {
     
     
      formData: {
     
     
        images: [], //上传图片
      },
      showFileList: [], // 上传组件--回显内含url且是完整地址
      showFileUrl: [], // 上传组件回显图片--相对路径数据
    }
  },
  created() {
     
     
    this.getFinalInfo()
  },
  methods: {
     
     
    // 获取详情信息
    async getFinalInfo() {
     
     
      const res = await this.$api.getFinalInfo(this.$route.query.id)
      console.log('详情数据', res)
      if (res.success) {
     
     
        if (res.data.finalImages.length > 0) {
     
     
          this.showFileList = res.data.finalImages ||