@liuyunxi/upload

文件上传

图片上传预览，word上传预览，excel上传预览，mp4,m3u8上传预览。 限制上传数量 限制上传格式 限制上传大小

代码演示

<template>
  <AButton @click="ok" style="margin-bottom: 10px">打印文件上传结果</AButton>
  <YxUpload
      v-model:value="fileList"
      :action="action"
      rootUrl="http://127.0.0.1:8080"
      :headers="getHeaders"
      :watermark="getWatermark"
      :data="getData"
      :showUpload="true"
      :showDelete="true"
      :compress="0.5"
      :max="5"
      :size="5"
      accept=".jpg,.jpeg,.png,.mp4,.doc,.docx,.xls,.xlsx,.pdf"
  ></YxUpload>
</template>

<script setup lang="ts">
/**
 * 图片:.jpg,.jpeg,.png
 * 视频: .mp4,.avi,.mpeg
 * word: .doc,.docx
 * excel: .xls,.xlsx
 * pdf: .pdf
 */
import { ref } from 'vue'
const action = 'http://localhost:8010/file/v1/upload/local'
const fileList = ref([
  {
    name: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.png',
    path: '/dev/20221215/1babe97247b34a45a552a63421a88a70.jpeg',
    suffix: '.jpg',
  },
])
/**
 * 获取水印内容
 */
const getWatermark = () => {
  return [
    '姓名：张三',
    '时间：2022年12月28日 11:06:19',
    '地点：河南郑州高新区挤房间搜集佛我安静地搜if就按搜ID金佛下世纪东方',
  ]
}
/**
 * 获取请求头
 */
const getHeaders = () => {
  return {
    'Cache-Id':
        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXlsb2FkIjp7ImZyZXNoVGltZSI6MTY4MjE1NDUxNCwiaW5mbyI6IntcImF2YXRhclwiOlwie1xcXCJ1cmxcXFwiOiBudWxsLCBcXFwibmFtZVxcXCI6IFxcXCJjcm9wcGVkLTE2NzYzMzkzNzM3MTcucG5nXFxcIiwgXFxcInBhdGhcXFwiOiBcXFwiXFxcXFxcXFxkZXZcXFxcXFxcXDIwMjMwMjE0XFxcXFxcXFxhYjhhMjI5ZjM3YmQ0MmUzODg0YjhiNmVlMTI5ZmNkYy5wbmdcXFwiLCBcXFwic2l6ZVxcXCI6IG51bGwsIFxcXCJzdWZmaXhcXFwiOiBcXFwicG5nXFxcIn1cIixcImVtYWlsXCI6XCJcIixcImlkXCI6XCIyOGMxMTQ2NC0zZTY3LTRhNGEtYjI1MC04YzQyMjZhNzAxNDhcIixcImxvZ2luSXBcIjpcIjE5Mi4xNjguMzEuMTg4XCIsXCJsb2dpbk5hbWVcIjpcImFkbWluXCIsXCJsb2dpblRpbWVTdHJcIjpcIjIwMjMtMDQtMTkgMTY6NThcIixcInBob25lTnVtYmVyXCI6XCIxNzMzNTc3ODY4NVwiLFwicm9sZXNcIjpbXCLnrqHnkIblkZhcIl0sXCJzZXhcIjpcIlwiLFwidGVuYW50SWRcIjpcImZhMzY5ZTE5LTI2NDgtNGNkYy1hOGUzLWQwMDEyODgwMmRlYVwiLFwidXNlck5hbWVcIjpcIuW5s-WPsOWFrOWPuOi2heeuoVwifSJ9LCJleHAiOjE2ODIwNzE3MTR9.fv_VHuCy3aQ0MFdsiS3X3aHmOcI8qeRmSQN8ezt-AxE',
  }
}
const ok = () => {
  console.log(fileList.value)
  console.log(JSON.stringify(fileList.value))
}
const getData = () => {
  return {
    name: '自定义参数',
  }
}
setTimeout(() => {
  fileList.value = [
    {
      name: 'yyy.png',
      path: '/dev/20221221/468A0236 (2).pdf',
      suffix: '.pdf',
    },
    {
      name: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.docx',
      path: '/dev/20221215/1babe97247b34a45a552a63421a88a70.docx',
      suffix: '.docx',
    },
    {
      name: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.png',
      path: '/dev/20230421/8bfcd14e03524f27bda1453d6392821c.jpg',
      suffix: '.jpg',
    },
  ]
}, 1000)
</script>

<style scoped lang="less"></style>

API

参数

参数	说明	类型	默认值
v-model:value	绑定数据	Array	[]
action	上传地址	string
rootUrl	文件访问跟地址	string
headers	请求头	Function	{}
watermark	水印文本内容 （仅图片生效）	string[] or Function
accept	允许格式（详见demo）	string
max	最大数量限制	number	5
size	最大大小限制 单位M	number	200
showUpload	是否显示上传按钮	boolean	true
showDelete	是否显示删除按钮	boolean	true
compress	压缩0-1	number	1
data	自定义参数	function

事件

事件名称	说明	回调参数
change	[]	function({xx:string})