Uploader 上传

使用指南

Component({
  data: {
    fileList1: [],
    fileList2: [
    ],
    fileList3: [],
    fileList5: [],
    fileList6: [],
    fileList7: [],
    fileList8: [],
  },

  afterRead(event) {
    const { key } = event.currentTarget.dataset;
    const { file } = event.detail;

    const fileList = this.data[key];
    if (!('path' in file) && 'tempFilePath' in file) {
      file.path = file.tempFilePath;
    }
    fileList.push({
      ...file,
    });
    this.setData({
      [key]: fileList,
    });
  },

  onDelete(event) {
    const { key } = event.currentTarget.dataset;
    const { index } = event.detail;
    const fileList = this.data[key];
    fileList.splice(index, 1);
    this.setData({
      [key]: fileList,
    });
  },

  afterRead1(event) {
    const { key } = event.currentTarget.dataset;
    const { file } = event.detail;
    const fileList = this.data[key];
    fileList.push({
      ...file,
      isVideo: true,
    });
    this.setData({
      [key]: fileList,
    });
  },

  beforeRead(event) {
    const { file, callback } = event.detail;

    if (file.tempFilePath.lastIndexOf('.jpg') > -1) {
      callback(true);
    } else {
      callback(false);
      wx.showToast({
        title: '只能上传jpg图片',
        icon: 'none',
      });
    }
  },
});

<view class="container">
  <view>
    基础用法
    <tms-uploader
      data-key="fileList1"
      file-list="{{ fileList1 }}"
      bind:after-read="afterRead"
      bind:delete="onDelete"
    />
  </view>

  <view>
    限制上传数量
    <tms-uploader
      max-count="2"
      data-key="fileList5"
      file-list="{{ fileList5 }}"
      bind:after-read="afterRead"
      bind:delete="onDelete"
    />
  </view>

  <view>
    上传校验
    <tms-uploader
      data-key="fileList6"
      file-list="{{ fileList6 }}"
      bind:after-read="afterRead"
      accept="media"
      use-before-read
      bind:before-read="beforeRead"
      bind:delete="onDelete"
    />
  </view>

  <view>
    上传其他文件
    <tms-uploader
      data-key="fileList7"
      file-list="{{ fileList7 }}"
      bind:after-read="afterRead"
      accept="all"
      bind:delete="onDelete"
    />
  </view>

  <view>
    自定义上传样式
    <tms-uploader
      data-key="fileList8"
      file-list="{{ fileList8 }}"
      bind:after-read="afterRead"
      bind:delete="onDelete"
    >
      <button>上传图片</button>
    </tms-uploader>
  </view>
</view>

属性

参数	说明	类型	可选值	默认值
name	标识符	String,Number	—	—
disabled	是否禁用文件上传	Boolean	—	false
uploadText	上传区域文字提示	String	—	—
useBeforeRead	是否开启文件读取前事件	Boolean	—	false
beforeRead	文件读取前方法，返回 true 或者 false，false 会中断上传	Function	—	—
afterRead	文件读取后方法	Function	—	—
accept	接受的文件类型	String	all, media, image, file, video	image
multiple	是否开启图片多选，部分安卓机型不支持	Boolean	—	false
maxCount	文件上传数量限制	Number	—	—
fileList	文件列表	Array	—	—
maxSize	文件大小限制，单位为 byte	Number	—	—
previewImage	是否在上传完成后展示预览图	Boolean	—	true
imageFit	预览图裁剪模式，可选值参考小程序 image 组件的 mode 属性	String	—	scaleToFill
previewSize	预览图和上传区域的尺寸，默认单位为 px	String, Number	—	160rpx
previewFullImage	是否在点击预览图后展示全屏图片预览	Boolean	—	true
deletable	是否展示删除按钮	Boolean	—	true
uploadIcon	上传区域图标	String	—	camera
showUpload	是否展示文件上传按钮	Boolean	—	true
sizeType	所选的图片的尺寸, 当accept为image 类型时设置所选图片的尺寸	Array	original, compressed
capture	图片或者视频选取模式	Array	album, camera	['album', 'camera']
compressed	当 accept 为 video 时生效，是否压缩视频	Boolean	—	true
maxDuration	当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒	Number	—	60
camera	当 accept 为 video 时生效	String	back, front	back

accept 的合法值

参数	说明
media	图片和视频
image	图片
video	视频
file	从客户端会话选择图片和视频以外的文件
all	从客户端会话选择所有文件

FileList 说明

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

参数	说明
url	图片和视频的网络资源地址
name	文件名称，视频将在全屏预览时作为标题显示
type	文件类型，可选值image video file
isImage	手动标记图片资源
isVideo	手动标记视频资源

事件

事件名	说明	参数
bind:error	选择文件发生错误	error
bind:before-read	文件读取前，在回调函数中返回 false 可终止文件读取，绑定事件的同时需要将use-before-read属性设置为true	{file,
bind:oversize	文件超出大小限制	{file}
bind:after-read	文件读取完成后	{file}
bind:delete	删除文件	{file}
bind:click-preview	点击预览图片	Object

插槽

插槽名称	说明
—	自定义上传区域

CSS变量

// 上传图片展示宽度
--uploader-preview-image-width: 100rpx;
// 上传图片展示高度
--uploader-preview-image-height: 100rpx;
// 上传图片删除按钮背景颜色
--uploader-preview-delete-background: rgba(0, 0, 0, .7);
// 上传图片删除按钮宽度
--uploader-preview-delete-icon-width: 28rpx;
// 上传图片删除按钮高度
--uploader-preview-delete-icon-height: 28rpx;
// 上传文件背景颜色
--uploader-file-background:  #ccc;
// 上传文件名颜色
--uploader-file-name-color: #646566;
// 上传默认背景颜色
--uploader-upload-background: #ccc;
// 上传默认文字颜色
--uploader-uploadText-color: #969799;
// 上传禁止透明度
--uploader-disabled-opacity: .5;