更新记录

1.4.1（2024-04-08）

修复已知问题

1.4.0（2023-07-04）

新增unicloud启用目录选项

1.3.9（2023-06-28）

修复属性选择器警告提示

平台兼容性

cl-upload 上传组件

支持手动自动上传，样式调整，参数配置，预览，删除等功能

注意：每次上传都需要回调函数接收参数并且添加到与组件绑定的数组中以保持数据一致,这样做是因为组件不知道服务端返回的数据格式，也可以在组件中修改promise格式 一劳永逸

注意事项

1. ratio 图片比例属性部分手机不支持，可选用height属性代替
2. 自定义播放按钮部分平台有兼容性问题，可选择性关闭
3. 开启压缩图片返回的临时路径没有尾缀，官方api的问题。真机上没问题，也可以在上传的时候手动添加尾缀
4. 视频地址必须https, http可能导致无法显示封面图
5. 如果没条件用https那就配置cloudType: other

H5体验地址

list数据格式

1. 数组格式

   ['地址1','地址2']

2. JSON格式

   [
   {
       path: '地址1.png',
       // 其他信息
   },
   {
       path: '地址2.mp4',
       poster: '自定义封面.png'
       // 其他信息
   },
   {
       path: '地址3.mp4',
       poster: require('../../static/c1.png'), // 封面也可以是本地图片
       // 其他信息
   },
   ]

基础使用

<cl-upload v-model="list" action="请求地址" @onSuccess="onSuccess"></cl-upload>

methods: {
    /**
     * 自动上传返回的是一张图片信息
     * 手动上传返回的是已选中所有图片或者视频信息
     * */ 
    onSuccess(reslut) {
        // 把服务端返回的图片地址添加到list中与组件数据同步
        this.list.push(reslut.url)
    },
}

uniCloud上传

一句代码实现上传,就是这么简单

<cl-upload v-model="list" action="uniCloud"></cl-upload>

自定义样式

通过 listStyle 控制每行数量、比例、行间距、列间距等常用样式

<cl-upload v-model="list" :listStyle="{
    columns: 2,
    columnGap: '20rpx',
    rowGap:'20rpx',
    padding:'10rpx',
    height:'300rpx',
    radius:'20rpx'
}">
    <template v-slot:addImg>
        <view class="newAddImg">
            <view>＋</view>
            <text >添加</text>
        </view>
    </template>
</cl-upload>

预览模式

关闭显示添加按钮和删除按钮

<cl-upload v-model="list" :add="false" :remove="false"></cl-upload>

手动上传

通过 autoUpload 关闭掉自动上传，提交的时候通过 refs 主动调用组件上传方法，返回本次提交成功服务器返回数据

<cl-upload 
    ref="upload2" 
    v-model="list2" 
    :autoUpload="false"></cl-upload>

<button @tap="submit">手动提交</button>

methods: {
    submit() {
        /**
         * 主动调用组件上传方法
         * */ 
        this.$refs.upload2.submit().then(reslut=>{
            console.log(reslut); // 本次提交成功服务器返回数据

            // 上传第三方服务器需要手动同步数据
            // 上传uniCloud则不需要
            const imgUrls = reslut.list.map(imgInfo=> imgInfo.url);
            this.list2 = [...this.list2, ...imgUrls]
        })
    },
}

配置删除前和上传前钩子

/ **
* 开启删除前钩子 useBeforeDelete
* 开启上传前钩子 useBeforeUpload
*/
<cl-upload v-model="list" 
    useBeforeDelete 
    useBeforeUpload
    @beforeDelete="beforeDelete"
    @beforeUpload="beforeUpload"></cl-upload>

methods: {
    /**
     * 删除前钩子
     * @param {Object} item 当前删除的图片或者视频信息
     * @param {Number} index 当前删除的图片或视频索引
     * @param {Function} next 调用此函数继续执行组件删除逻辑
     * */ 
    beforeDelete(item, index, next) {
        uni.showModal({
            title: '提示信息',
            content: '确定要删除这个文件嘛？',
            success: res => {
                if (res.confirm) {
                    // 模拟服务器接口
                    setTimeout(() => {
                        next();
                    }, 1000);
                }
            }
        });
    },
    /**
     * 上传前钩子
     * @param {Object} tempFile 当前上传文件信息
     * @param {Function} next 调用此函数继续执行组件上传逻辑
     * */
    beforeUpload(tempFile, next) {
        // 自己的上传逻辑
        // 如果不需要走组件的上传逻辑就不用调用next(), 但是上传完要同步到list
    }
}

API

imageFormData

videoFromData

listStyle

Events

参数说明

遇到问题或者讨论 uniapp 加入QQ群 553291781