【若依Vue3批量上传图片、文件上传时传递其他参数的处理方式】

由于近期需要处理图片批量上传的业务，去网上查关于Vue3的图片批量上传解决方案，发现资料确实比较繁杂，甚至很多都要收费，对于功能来说也有一些缺失，我就自己整理了一下包括 （批量图片上传、阿里云OSS、文件上传时传递其他参数到后台、批量上传时重命名处理），希望能帮到友友们！

【注：在组件上传文件时不可以直接修改文件的属性如：file.name=XXX,因为文件属性属于只读】

前端代码

调用

<oss-image-batch-upload v-model="form.img" :isView="isUpdate" :matchName="matchName" :matchId="form.matchId"/>

批量上传图片

<template>
  <div>
    <el-upload
        // 打开多文件上传
        :multiple="true"
        :action="uploadImgUrl"
        list-type="picture-card"
        :on-success="handleUploadSuccess"
        :before-upload="handleBeforeUpload"
        :limit="limit"
        :on-error="handleUploadError"
        :on-exceed="handleExceed"
        ref="imageUpload"
        :before-remove="handleDelete"
        :show-file-list="true"
        :headers="headers"
        // 除了file之外需要传递给后端的参数
        :data="data"
        :file-list="fileList"
        :on-preview="handlePictureCardPreview"
        :class="{ hide: fileList.length >= limit }"
        :disabled="isView"
    >
      <el-icon>
        <plus/>
      </el-icon>
    </el-upload>
    <!-- 上传提示 -->
    <div v-if="showTip" v-show="!isView">
      请上传
      <template v-if="fileSize">
        单张大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
      </template>
      <template v-if="fileType">
        格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
      </template>
      的文件（单次最多上传100张）
    </div>

    <el-dialog
        v-model="dialogVisible"
        title="预览"
        width="800px"
        append-to-body
    >
      <img
          :src="dialogImageUrl"
          style="display: block; max-width: 100%; margin: 0 auto"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import {getToken} from "@/utils/auth";
import {deleteFile} from "@/api/cms/oss/upload.js";

const props = defineProps({
  modelValue: [String, Object, Array],
  
  // 调用组件传递的参数
  isView: null,
  matchName: null,
  matchId: null,
  
  // 图片数量限制
  limit: {
    type: Number,
    default: 100,
  },
  // 大小限制(MB)
  fileSize: {
    type: Number,
    default: 20,
  },
  // 文件类型, 例如['png', 'jpg', 'jpeg']
  fileType: {
    type: Array,
    default: () => ["png", "jpg", "jpeg"],
  },
  // 是否显示提示
  isShowTip: {
    type: Boolean,
    default: true
  },
});
const data = {
  matchName: "",