文件上传

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

代码演示

<template>
  <AButton @click="ok" style="margin-bottom: 10px">打印文件上传结果</AButton>
  <YxUpload2
      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"
  ></YxUpload2>
</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}) |