上传业务组件

单个图片

附件上传

单个图片

<template>
  <su-upload class="vp-raw" ref="upload" isImg @change="change" :uploadUrl="fileUrl" />
</template>

<script setup lang="ts">
import axios from "axios";
import { ref } from 'vue'
const fileUrl = ref('');
const upload = ref();
const change = async (uploadData: FormData) => {
  let url = `${window.location.hostname === 'localhost' ? '/api':'http://192.168.0.176/node'}/file/upload`
  axios.post(url, uploadData).then((response) => {
    fileUrl.value = `http://192.168.0.176/${response.data.data.fileUrl}`;
    upload.value.update(fileUrl.value);
  });
};
</script>

单个文件

附件上传

单个文件

<template>
  <su-upload
    class="vp-raw"
    ref="upload"
    @change="change"
    :uploadUrl="fileUrl"
    :fileType="[
      'text/plain',
      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'application/pdf',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    ]"
  />
</template>

<script setup lang="ts">
import axios from "axios";
import { ref } from "vue";
const fileUrl = ref("");
const upload = ref();
const change = async (uploadData: FormData) => {
  let url = `${
    window.location.hostname === "localhost"
      ? "/api"
      : "http://192.168.0.176/node"
  }/file/upload`;
  axios.post(url, uploadData).then((response) => {
    fileUrl.value = `http://192.168.0.176/${response.data.data.fileUrl}`;
    upload.value.update(fileUrl.value);
  });
};
</script>

多个图片、文件混合上传

混合上传

<template>
  <su-upload
    class="vp-raw"
    ref="upload"
    :maxCount="3"
    @change="change"
    :uploadUrl="fileUrl"
    :fileType="[
      'image/apng',
      'image/bmp',
      'image/gif',
      'image/jpeg',
      'image/pjpeg',
      'image/png',
      'image/svg+xml',
      'image/tiff',
      'image/webp',
      'image/x-icon',
      'text/plain',
      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'application/pdf',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    ]"
  />
</template>

<script setup lang="ts">
import axios from "axios";
import { ref } from "vue";
const fileUrl = ref([]);
const upload = ref();
const change = async (uploadData: FormData) => {
  let url = `${
    window.location.hostname === "localhost"
      ? "/api"
      : "http://192.168.0.176/node"
  }/file/upload`;
  axios.post(url, uploadData).then((response) => {
    upload.value.update(`http://192.168.0.176/${response.data.data.fileUrl}`);
  });
};
</script>

组件参数配置

参数	说明	类型	默认值
uploadUrl	图片地址	string、string[]	单页面存在有多个table并都开启showTools时配置
fileSize	大小限制	number	默认为 5M
fileType	类型限制	FileTypes[]	默认为 ["image/jpeg", "image/png", "image/gif"]
height	组件高度	string	默认为 160px
width	组件宽度	string	默认为 160px
borderRadius	组件边框圆角	string	默认为 8px
maxCount	最大上传数量	number	默认为1
uploadText	显示文字	string	--
isImg	是否只为图片, 用于单个图片上传	boolean	--

组件内暴露的值或方法

参数	说明	类型	示例
uploadFileList	当前文件类别	file[]	--
update	更新上传的文件	function	--