更新记录

1.0.0（2025-02-08） 下载此版本

发布初版

平台兼容性

Upload 上传文件

组件名: xt-upload

适配情况需自行尝试,开发时只测试了H5、APP、微信小程序

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

基本用法

<template>
  <view class="xt">
    <view>
      <xt-upload file-type="all" @delete='del' :fileList='fileList' multiple :autoUpload="false"
        @beforeUpload="upload" :beforeRead="onBeforeRead"></xt-upload>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        fileList: [{
          url: 'https://img0.baidu.com/it/u=1768120018,3539110649&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=192b5c0759bd09fcaf19d3bff8b32adc',
          name: 'logo.png',
          type: 'image',
          success: 'load'
        },
        {
           url: 'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
           name: '123',
           s: '789',
           type: 'image'
         }
        ]}

    },
    methods: {
      upload(e) {
        // 模拟上传
        setTimeout(() => {
          this.fileList.push({
            url: 'https://img2.baidu.com/it/u=2483685177,1210496438&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
            type: 'image',
            // 上传失败
            // success:false
          })
        }, 2000)
      },
      // 选择完成事件,预先处理文件信息,编写方法,需保证 useBeforeRead 为 false
      onBeforeRead(e) {
        return new Promise((resolve) => {
          resolve({
            url: e?.url, // 必填
            name: e?.name || '文件名称',
            type: e?.type, // 必填
            size: e?.size, // 必填
            thumb: e?.thumb,
          })
        })
      },
      // useBeforeRead 为 true时触发
      beforeRead(e) {
        console.log('选择完成');
      },
      oversize(e) {
        uni.showToast({
          title: '文件大小超过限制',
          icon: 'none'
        })
      },
      // 删除事件
      del(e) {
        this.fileList.splice(e.index, 1)
      }
    },
  }
</script>

<style lang="scss">
  .xt {
    padding: 100rpx 20rpx;
  }
</style>

回显数据

<!-- 绑定fileList字段即可 -->
<!-- 格式为数组对象 -->
/**
* url 文件url 必填,与 fileKey 一致即可
* type 文件类型 当 fileType 为 image 或 video 时,
* 回显对应文件可不传,其余情况必填 可选值 image 和 video
*/
  const fileList = [{
                        url: 'https://img0.baidu.com/it/u=1768120018,3539110649&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=192b5c0759bd09fcaf19d3bff8b32adc',
                        name: 'logo.png',
                        type: 'image',
                        success: 'load'
                    },
                    {
                        url: 'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                        name: '123',
                        s: '789',
                        type: 'image'
                    }
                ]

自定义上传方法

1. 开启遮罩层时,失败和成功都需将数据push到绑定的fileList字段上,否则将一直为上传中

/**
* success 可选值 load true false
* 分别对应 上传中 上传成功 上传失败
*/
// 成功
fileList.push({
  url:xxxxx,
  type:'image' //同回显填写逻辑相同
})
// 失败
fileList.push({
  url:xxxxx, // 填写自己的失败图片或者填写文件的临时路径
  type:'image', //同回显填写逻辑相同
  success:false
})

2. 示例如下

/**
* e 为文件信息,包含临时路径,大小,类型等
*/
upload(e) {
                // 模拟上传
            setTimeout(() => {
                this.fileList.push({
                    url: 'https://img2.baidu.com/it/u=2483685177,1210496438&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
                    type: 'image',
                    // 上传失败
                    // success:false
                })
            }, 2000)
    },

手动上传

1. 通过绑定ref,调用submit方法,进行上传;

<template>
  <view class="xt">
    <view>
      <xt-upload ref="upload" @delete='del' :fileList='fileList' multiple :autoUpload="false"></xt-upload>
    </view>
    <button @click="submit">上传</button>
  </view>
</template>
<script>
    export default {
        data() {
            return {
                fileList: [{
                        url: 'https://img0.baidu.com/it/u=1768120018,3539110649&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=192b5c0759bd09fcaf19d3bff8b32adc',
                        name: 'logo.png',
                        type: 'image',
                        success: 'load'
                    },
                    {
                        url: 'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                        name: '123',
                        s: '789',
                        type: 'image'
                    }
                ]
            }

        },
        methods: {
      // 手动上传
            submit() {
                this.$refs.upload.submit();
            },
            // 删除事件
            del(e) {
                this.fileList.splice(e.index, 1)
            }
        },
    }
</script>

选择文件后需要自己处理时

 // 选择完成事件,预先处理文件信息,编写方法,需保证 useBeforeRead 为 false
  /**
  * 必须返回 Promise
  * 这里自定义的信息,可在上传时进行选择,搭配自定义上传
  * 当配合自定义上传时,即可随意返回参数
  */
      onBeforeRead(e) {
        return new Promise((resolve) => {
          resolve({
            url: e?.url, // 必填
            name: e?.name || '文件名称',
            type: e?.type, // 必填
            size: e?.size, // 必填
            thumb: e?.thumb,
          })
        })
      },

API

Events

说明

1. fileType属性中 media 只有微信小程序支持,一般场景为 视频和图片都可以选择的环境;
2. 部分终端中当fileType为image时,但是打开相册选择了视频时,依旧是当作图片处理,反之同理;
3. fileType属性中APP不支持 file;
4. readCallback事件只有当useBeforeRead为true时有效;
5. 当useBeforeRead为true时,beforeRead处理函数就无效;
6. preview事件对视频无效,当文件类型不为video和image时,可自行利用preview事件处理预览