vue3-element-admin/src/views/demo/upload.vue

<!-- 文件上传组件示例 -->
<template>
  <div class="app-container">
    <el-link
      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/upload.vue"
      type="primary"
      target="_blank"
      class="mb-10"
    >
      示例源码 请点击>>>>
    </el-link>

    <el-form>
      <el-form-item label="绑定值">
        {{ picUrl }}
      </el-form-item>
      <el-form-item label="图片上传">
        <ImageUpload v-model="picUrl" :maxSize="10" />
      </el-form-item>
      <el-form-item label="参数说明">
        <el-table :data="imageUploadArgData" border>
          <el-table-column prop="argsName" label="参数名称" width="300" />
          <el-table-column prop="type" label="参数类型" width="200" />
          <el-table-column prop="default" label="默认值" width="400" />
          <el-table-column prop="desc" label="描述" width="300" />
        </el-table>
      </el-form-item>

      <el-form-item label="文件上传">
        <FileUpload v-model="fileUrls" />
      </el-form-item>
      <el-form-item label="参数说明">
        <el-table :data="fileUploadArgData" border>
          <el-table-column prop="argsName" label="参数名称" width="300" />
          <el-table-column prop="type" label="参数类型" width="200" />
          <el-table-column prop="default" label="默认值" width="400" />
          <el-table-column prop="desc" label="描述" width="300" />
        </el-table>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
// 单图
const picUrl = ref("https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg");

const imageUploadArgData = [
  {
    argsName: "v-model",
    type: "[Array,String]",
    default: "[]  |  ''",
    desc: "已经上传的图片数组,单张图片时为String",
  },
  {
    argsName: "action",
    type: "String",
    default: "FileAPI.uploadUrl",
    desc: "文件上传地址",
  },
  {
    argsName: "headers",
    type: "Object",
    default: "{Authorization: localStorage.getItem(TOKEN_KEY),}",
    desc: "上传请求头",
  },
  {
    argsName: "data",
    type: "Object",
    default: "{}",
    desc: "请求携带的额外参数",
  },
  {
    argsName: "name",
    type: "String",
    default: "file",
    desc: "上传文件的参数名",
  },
  {
    argsName: "limit",
    type: "Number",
    default: 1,
    desc: "上传最大的图片数量,多张图片时填写最大上传数量，默认单张图片",
  },
  {
    argsName: "show-del-btn",
    type: "Boolean",
    default: true,
    desc: "是否显示删除按钮",
  },
  {
    argsName: "show-upload-btn",
    type: "Boolean",
    default: true,
    desc: "是否显示上传按钮",
  },
  {
    argsName: "max-size",
    type: "Number",
    default: "10",
    desc: "单个图片上传大小限制(单位MB)",
  },
  {
    argsName: "accept",
    type: "String",
    default: "image/*",
    desc: "上传文件类型",
  },
  {
    argsName: "supportFileType",
    type: "Array",
    default: "[]",
    desc: "支持的文件类型,默认支持所有图片格式,eg:['png','jpg','jpeg','gif']",
  },
  {
    argsName: "isSyncDelete",
    type: "Boolean",
    default: "true",
    desc: "是否同步删除服务端文件(默认是，如果为否，则只会删除当前上传的图片，已经上传到服务端到图片不会删除)",
  },
  {
    argsName: "style",
    type: "Object",
    default: "{width: '130px',height: '130px'}",
    desc: "上传组件的样式",
  },
];

const fileUrls = ref([
  {
    name: "file one.jpg",
    url: "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
  },
  {
    name: "file two.jpg",
    url: "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
  },
]);

const fileUploadArgData = [
  {
    argsName: "v-model",
    type: "Arrays",
    default: "[]",
    desc: "已经上传的文件数组",
  },
  {
    argsName: "action",
    type: "String",
    default: "FileAPI.uploadUrl",
    desc: "文件上传地址",
  },
  {
    argsName: "limit",
    type: "Number",
    default: 10,
    desc: "上传最大的文件数量",
  },
  {
    argsName: "show-del-btn",
    type: "Boolean",
    default: true,
    desc: "是否显示删除按钮",
  },
  {
    argsName: "show-upload-btn",
    type: "Boolean",
    default: true,
    desc: "是否显示上传按钮",
  },
  {
    argsName: "max-size",
    type: "Number",
    default: "10",
    desc: "单个文件上传大小限制(单位MB)",
  },
  {
    argsName: "accept",
    type: "String",
    default: "*",
    desc: "上传文件类型",
  },
  {
    argsName: "upload-btn-text",
    type: "String",
    default: "上传文件",
    desc: "上传按钮文本",
  },
  {
    argsName: "show-tip",
    type: "Boolean",
    default: false,
    desc: "是否显示提示",
  },
  {
    argsName: "tip",
    type: "String",
    default: '""',
    desc: "提示文本",
  },
  {
    argsName: "headers",
    type: "Object",
    default: "{Authorization: localStorage.getItem(TOKEN_KEY),}",
    desc: "提示文本类型",
  },
  {
    argsName: "data",
    type: "Object",
    default: "{}",
    desc: "请求携带的额外参数",
  },
  {
    argsName: "name",
    type: "String",
    default: "file",
    desc: "上传文件的参数名",
  },
  {
    argsName: "style",
    type: "Object",
    default: "{width:'300px'}",
    desc: "上传组件的样式",
  },
];
</script>