npm package: @liuyunxi/upload
Description: 文件上传 vue3+ts
Author: liuqiang[916000612@qq.com]
Latest version: 1.0.2


# 文件上传

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

# 代码演示

```vue

<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}) |