更新记录

1.0.0（2026-01-02）

1. 初始版本
2. 支持图片和PDF文件上传
3. 支持文件预览和删除
4. 支持自定义上传数量限制
5. 支持单文件和多文件上传
6. 支持文件大小限制
7. 支持自定义上传按钮文本
8. 支持安卓和iOS平台

平台兼容性

uni-app(4.0)

zsy-imagePdfUpload

功能

1. 支持图片和PDF文件上传
2. 带预览和删除功能
3. 支持自定义上传数量限制
4. 支持单文件和多文件上传
5. 支持文件大小限制
6. 支持自定义上传按钮文本
7. 支持自定义上传逻辑（需实现上传签名和下载地址获取方法）
8. 支持安卓和iOS平台

快速集成

1. 点击右上角的 使用 HBuilder X 导入插件 按钮直接导入项目
2. 点击 下载插件 ZIP 按钮下载插件包并解压到项目的 uni_modules 目录下

使用方法

1. 在需要使用的页面中引入组件

   
   <template>
   <view>
   <zsy-imagePdfUpload 
     @success="onUploadSuccess" 
     :value="fileList"
     :getUploadFileParams="getUploadFileParams"
     :getDownloadFileInfo="getDownloadFileInfo"
   ></zsy-imagePdfUpload>
   </view>
   </template>

## 属性说明

| 属性名 | 类型 | 默认值 | 必填 | 说明 |
| --- | --- | --- | --- | --- |
| value | Array | [] | 否 | 已上传文件列表，用于回显，每个元素至少需包含url、name、type三个字段 |
| maxSize | Number | 52428800 | 否 | 单个文件最大大小（字节），默认50MB |
| maxCount | Number | 5 | 否 | 最大上传文件数量 |
| deletable | Boolean | true | 否 | 是否显示删除按钮 |
| preview | Boolean | true | 否 | 是否允许预览文件 |
| multiple | Boolean | false | 否 | 是否允许多选 |
| buttonText | String | "选择文件" | 否 | 上传按钮文本 |
| getUploadFileParams | Function | - | 是 | 自定义获取上传签名方法，返回上传所需的参数（url、formData等） |
| getDownloadFileInfo | Function | - | 是 | 自定义获取下载地址方法，根据上传结果返回文件信息（fileId、url等） |

## 事件说明

| 事件名 | 参数 | 说明 |
| --- | --- | --- |
| success | fileList | 上传成功后返回完整文件列表，每个元素包含url、name、type等字段和用户添加的所有额外自定义字段 |

## 方法参数说明

### getUploadFileParams 方法

#### 入参（file 对象）

| 参数名 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| size | Number | 是 | 文件大小（字节） |
| type | String | 是 | 文件类型，枚举值：image、pdf |
| name | String | 是 | 文件名 |

#### 出参（返回对象）

| 参数名 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| url | String | 是 | 开发者服务器 url |
| name | String | 否 | 文件对应的 key，开发者在服务器端通过这个 key 可以获取到文件二进制内容，默认为file |
| header | Object | 否 | HTTP 请求 Header，header 中不能设置 Referer |
| timeout | Number | 否 | 超时时间，单位 ms |
| formData | Object | 否 | HTTP 请求中其他额外的 form data |
| [自定义字段] | Any | 否 | 支持用户添加额外字段，会被传递到 getDownloadFileInfo 方法的 uploadFileParams 字段中 |

### getDownloadFileInfo 方法

#### 入参（uploadResult 对象）

| 参数名 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| statusCode | Number | 是 | HTTP 状态码 |
| data | String | 是 | 服务器返回的数据 |
| uploadFileParams | Object | 是 | getUploadFileParams 方法返回的完整对象，包含用户添加的所有额外字段 |
| file | Object | 是 | 文件信息对象，包含 name、size、type 字段 |
| file.name | String | 是 | 文件名 |
| file.size | Number | 是 | 文件大小（字节） |
| file.type | String | 是 | 文件类型，枚举值：image、pdf |

#### 出参（返回对象）

| 参数名 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| url | String | 是 | 文件下载地址，用于预览和访问文件 |
| [自定义字段] | Any | 否 | 支持用户添加额外字段，会被包含在成功事件返回的fileList中 |

## 注意事项

1. 组件需要通过 props 传入 `getUploadFileParams` 和 `getDownloadFileInfo` 两个函数来实现自定义上传逻辑
2. `getUploadFileParams` 函数需返回包含上传地址（url）、表单数据（formData）等上传所需参数
3. `getDownloadFileInfo` 函数需根据上传结果返回包含 url 等信息的文件对象
4. 仅支持安卓和iOS平台

## 示例

```vue
<template>
  <view class="container">
    <h1>图片PDF上传示例</h1>
    <zsy-imagePdfUpload 
      :maxCount="3" 
      :multiple="true" 
      :buttonText="'点击上传'" 
      :getUploadFileParams="getUploadFileParams"
      :getDownloadFileInfo="getDownloadFileInfo"
      @success="onUploadSuccess" 
      :value="fileList">
    </zsy-imagePdfUpload>
    <view class="result">
      <h2>已上传文件列表：</h2>
      <view v-for="(file, index) in fileList" :key="index" class="file-item">
        <text>文件名：{{ file.name }}</text>
        <text>文件ID：{{ file.fileId }}</text>
        <text>文件类型：{{ file.type }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    // 自定义获取上传签名方法
    async getUploadFileParams(file) {
      console.log('获取上传参数，文件信息：', file)
      // 模拟获取上传签名，返回包含所有支持字段的对象
      return {
        url: 'https://your-upload-url.com/upload',
        name: 'file',
        header: {
          'Content-Type': 'multipart/form-data'
        },
        timeout: 30000,
        formData: {
          token: 'your-upload-token',
          timestamp: Date.now(),
          fileType: file.type
        },
        // 添加自定义字段，会被传递到 getDownloadFileInfo 方法中
        customField: 'customValue',
        uploadType: 'imagepdf'
      }
    },

    // 自定义获取下载地址方法
    async getDownloadFileInfo(uploadResult) {
      console.log('获取下载地址，上传结果：', uploadResult)
      // 可以使用 getUploadFileParams 返回的自定义字段
      console.log('自定义字段：', uploadResult.uploadFileParams.customField)
      console.log('上传类型：', uploadResult.uploadFileParams.uploadType)

      // 模拟解析服务器返回的数据
      let data = {}
      try {
        data = JSON.parse(uploadResult.data)
      } catch (e) {
        console.error('解析服务器返回数据失败：', e)
      }

      // 模拟获取下载地址
      return {
        // url 是必填字段
        url: data.url || 'https://your-file-storage.com/files/' + Date.now() + '.' + (uploadResult.file.type === 'image' ? 'jpg' : 'pdf'),
        // fileId 是可选的自定义字段
        fileId: data.fileId || 'file_' + Date.now(),
        // 添加自定义字段到返回结果中，会被包含在fileList里
        fileSize: uploadResult.file.size,
        uploadTime: new Date().toISOString()
      }
    },

    onUploadSuccess(fileList) {
      console.log('上传成功，文件列表：', fileList)
      this.fileList = fileList
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}

.result {
  margin-top: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
}

.file-item {
  margin: 5px 0;
  padding: 10px;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #eee;
}

.file-item text {
  display: block;
  margin: 3px 0;
  font-size: 14px;
}
</style>