Vue3中使用Ant Design Vue上传多个图片

ᥬ 小月亮

已于 2025-01-03 18:26:36 修改

阅读量1.3k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：原生CSS+UI框架文章标签： vue.js 前端 javascript

于 2024-01-18 17:07:19 首次发布

本文链接：https://blog.csdn.net/Y1914960928/article/details/135678754

模板代码：

在这里插入图片描述

定义变量：

在这里插入图片描述

文件限制的函数：

![![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/e0c18855525e450ab73b10e98fbd3103.pn](https://img-blog.csdnimg.cn/direct/80d98d0659f0415eb0b6720f9634460c.png

上传的函数：

在这里插入图片描述

样式函数：

在这里插入图片描述

完整代码：

<template>
  <div class="dialog-upload" v-if="showUploadDialog">
    <div class="dialog-upload__head">
      <div class="title">上传图片</div>
      <div class="close" @click="closeDialog"></div>
    </div>
    <div class="dialog-upload__body">
        <div class="upload-box">
          <span class="text">tab：</span>
          <div class="pic-box">
            <div v-for="(item,index) in imgUrl1" :key="index" class="pic-box__single">
              <a-image class="pic" :src="item" />
              <div @click="deleteImg('tab',item)" class="pic-delete"></div>
            </div>
            <a-upload
              action="#"
              :multiple="true"
              list-type="picture"
              :before-upload="beforeUpload"
              :customRequest="handleChange"
              :show-upload-list="false"
            >
              <div v-if="!imgUrl1.length || imgUrl1.length <5" class="img" @click="uploadImg('tab')"></div>
            </a-upload>
          </div>
        </div>
        <div class="upload-box">
          <span class="text">tab1：</span>
          <div class="pic-box">
            <div v-for="(item,index) in imgUrl2" :key="index" class="pic-box__single">
              <a-image class="pic" :src="item" />
              <div @click="deleteImg('tab1',item)" class="pic-delete"></div>
            </div>
            <a-upload
              action="#"
              :multiple="true"
              list-type="picture"
              :before-upload="beforeUpload"
              :customRequest="handleChange"
              :show-upload-list="false"
            >
              <div v-if="!imgUrl2.length || imgUrl2.length <5" class="img" @click="uploadImg('tab1')"></div>
            </a-upload>
          </div>
        </div>
    </div>
    <div class="dialog-upload__foot">
        <span class="sure" @click="sure">确定</span>
        <span class="cancle" @click="closeDialog">取消</span>
    </div>
  </div>
</template>

<script lang="ts">
import {
   
    defineComponent, reactive, toRefs, watch, nextTick } from 'vue'
import {
   
    message } from 'ant-design-vue'
import request from '@/request/request'
import axios from 'axios'

export default defineComponent