更新记录

0.2.3（2023-07-11）

app端增加了自定义每个视频封面的功能，现在dataType=1时可以设置cover来展示视频自定义封面图

0.2.2（2023-04-15）

修改了 uniCloud方式获取不到v-model绑定值的问题

0.2.1（2023-04-15）

修改了 uniCloud方式获取不到v-model绑定值的问题

平台兼容性

小程序版演示

集成说明

template中添加组件

<htz-image-upload  :max="3"  v-model="ceshiData" :uploadSuccess="zidingyiSuccess" action="http://XXX"></htz-image-upload>

script中引用组件

import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
export default {
        data() {
            return {
                ceshiData: []
            }
        },
        components: {
            htzImageUpload,
        },
    }

属性说明

事件

demo展示

<template>
    <view>
    <view >配置上传路径，通过@uploadSuccess事件的</view>
        <htz-image-upload 
        :max="3" 
        v-model="ceshiData" 
        @uploadSuccess="ceshiUploadSuccess" 
        action="http://XXX"></htz-image-upload>
        <view >配置上传路径，通过:uploadSuccess属性的</view>
        <htz-image-upload
        :max="3" 
        v-model="ceshiData1" 
        :uploadSuccess="zidingyiSuccess" 
        action="http://XXX"></htz-image-upload>
    </view>
    <view>使用uniCloud服务</view>
    <htz-image-upload  :sourceType="['camera','album']" mediaType="all"  :max="9" v-model="uniCloudData"
        action="uniCloud">
    </htz-image-upload>
</template>
<script>
    import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
    export default {
        data() {
            return {
                ceshiData: [],
                ceshiData1: [],
                uniCloudData:[],
            }
        },
        onLoad() {

        },
        components: {
            htzImageUpload,
        },
        methods: {
            ceshiUploadSuccess(res) { //上传成功
                /****************
                因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
                ***************/
                var _res = JSON.parse(res.data);
                if (_res.code == 200) {
                    this.ceshiData.push(_res.result);
                }
                /*******************************/
            },
            zidingyiSuccess(res){
                var _res = JSON.parse(res.data);
                if (_res.code == 200) {
                    return {
                        success: true,
                        url: 'http://XXX' + _res.result
                    }
                } else {
                    return {
                        success: false,
                        url: ''
                    }
                }

            },
        }
    }
</script>

备注

1. 目前当文件大于1MB时进行压缩，如果需要调整，大家就手动改代码吧~
2. 关于上传完成回显的问题，因为上传返回的结构都不一致，所以这部分代码需要开发者自己完成，只要将获取到的地址，添加到组件绑定的数组对象里即可
3. 解决了目前uni.chooseImage Android 10+ 路径的问题
4. 选择完图片展示视频样式的问题，现在插件内部是按照地址的后缀判断的，如果没有后缀统一按照视频处理了，这块确实有一点粗糙，我后期再改改（目前可以通过dataType==1 解决了）
5. 关于七牛云上传之后没有后缀的问题，需要上传时把key主动加上后缀
6. 离线打包无法打开相机的问题点这里查看
7. 建议上传后文件没有后缀的这种情况，使用dataType==1 的数据类型，可以解决判断文件类型的问题，需要的话下载demo示例，里面有详细的代码参考（H5如果只做展示，也需要使用此种数据类型）
8. 关于app视频样式的问题，因为video默认的样式比较丑，并且有层级的问题，所以改成了image设置了一个默认图，用户也可以通过appVideoPoster自定义统一的视频封面图，或者通过定义 dataType=1 设置cover来展示每个视频的封面图
9. 注意action='uniCloud' 不触发 @uploadSuccess @uploadFail @chooseSuccess 这些事件

10. 有问题可以加QQ群 1163242725