# 小程序上传图片视频组件

**Repository Path**: my_new_way/miniprogram-uploadfile

## Basic Information

- **Project Name**: 小程序上传图片视频组件
- **Description**: 原生小程序语法开发，模仿vant-wapapp组件的API开发
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-02-22
- **Last Updated**: 2023-01-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 上传文件

* 使用时将 `images` 文件夹删除即可（属于readme的资源文件）
* 





**效果图**

 ![image-20210222144509623](images/image-20210222144509623.png)

#### props

```
use-before-read	是否开启文件读取前事件
max-count	文件上传数量限制	默认值 9
file-list	 为一个数组，是当前组件中的数据即上传后临时保存的数据也是上传后回显数据

```

#### FileList

file-list` 为一个对象数组，数组中的每一个对象包含以下 `key

| 参数      | 说明                                                   |
| :-------- | :----------------------------------------------------- |
| `url`     | 图片和视频的网络资源地址                               |
| `name`    | 文件名称，视频将在全屏预览时作为标题显示               |
| `thumb`   | 图片缩略图或视频封面的网络资源地址，仅对图片和视频有效 |
| `type`    | 文件类型，可选值`image` `video` `file`                 |
| `isImage` | 手动标记图片资源                                       |
| `isVideo` | 手动标记视频资源                                       |

#### Event

| 事件名             | 说明                                                         | 回调参数                                                     |
| :----------------- | :----------------------------------------------------------- | :----------------------------------------------------------- |
| bind:before-read   | 文件读取前，在回调函数中返回 `false` 可终止文件读取，绑定事件的同时需要将`use-before-read`属性设置为`true` | `event.detail.file`: 当前读取的文件，`event.detail.callback`: 回调函数，调用`callback(false)`终止文件读取 |
| bind:after-read    | 文件读取完成后                                               | `event.detail.file`: 当前读取的文件                          |
| bind:oversize      | 文件超出大小限制                                             | -                                                            |
| bind:click-preview | 点击预览图片                                                 | `event.detail.index`: 点击图片的序号值                       |
| bind:delete        | 删除图片                                                     | `event.detail.index`: 删除图片的序号值                       |





#### 在页面中使用

page.wxml

```html
<upload-file
bind:before-read="beforeRead"  
bind:after-read="afterRead"
use-before-read
file-list="{{ fileList }}"
max-count='{{maxUloadCount}}'
bind:delete='uploadDeleEach'
/>
```

page.js

```js
  // 删除上传的某张图片（携带序号）
  uploadDeleEach(e) {
    let fileList = JSON.parse(JSON.stringify(this.data.fileList))
    let index = e.detail.index
    fileList.splice(index, 1)
    this.setData({
      fileList
    })
  },
  // 上传图片前判断
  beforeRead(event) {
    const {
      file,
      callback
    } = event.detail;
    file.forEach(item => {
      if (item.type === 'image') {
        // 如果是图片
        if (item.size > 1024 * 1024 * 20) {
          callback(false);
          wx.showToast({
            title: '图片最大支持20M',
            mask: true,
            icon: 'none'
          })
        } else {
          callback(true);
        }
      } else if (item.type === 'video') {
        // 如果是视频
        // 单个视频最大支持 100M
        if (item.size > 1024 * 1024 * 100) {
          callback(false);
          wx.showToast({
            title: '视频最大支持100M',
            mask: true,
            icon: 'none'
          })
        } else {
          callback(true);
        }
      } else {
        callback(false);
        wx.showToast({
          title: '只支持图片/视频上传',
          mask: true,
          icon: 'none'
        })
      }
    })
    // callback(false);
  },
  // 上传图片
  afterRead(event) {
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    const {
      file
    } = event.detail;
    const {
      fileList,
    } = this.data;
    /**
     * 单个视频最大支持 100M。（获得用户相册
     * 和视频授权），视频和图片最大支持 250M，图片最多支持 6 张图片。
     */
    fileList.push(...file);
    this.setData({
      fileList
    });
  },
```