更新记录

1.0.1（2025-02-13） 下载此版本

• H5 禁用视频预览

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

• 通用图片、视频文件上传组件
• 支持图片放大预览
• 支持视频播放
• 上传视频带进度条

平台兼容性

ziqirj-media-upload 图片/视频文件上传组件

组件名：ziqirj-media-upload 代码块： ziqirj-media-upload 关联组件：scss/sass, uni-icons, liu-progressbar, ksp-cropper

插件说明

• 1、通用图片、视频文件上传组件
• 2、支持图片放大预览
• 3、支持视频播放
• 4、上传视频带进度条

使用说明

组件参数

回调函数

@callback函数参数

使用示例

<template>
    <view style="margin: 0 15px;">
        <text>图片上传</text>
        <ziqirj-media-upload  param="imageList" 
            :list="form.imageList" 
            :limit="5"
            :maxMN="10" 
            url='http://localhost:9002/common/upload' 
            :headers="headers" 
            :config="{name: 'originalFilename', url: 'url'}"
            :clipping="true"
            @callback="callback">
        </ziqirj-media-upload>

        <text>视频上传</text>
        <ziqirj-media-upload fileType="video"
            param="videoList" 
            :list="form.videoList" 
            :limit="5"
            :maxMN="10" 
            url='http://localhost:9002/common/upload' 
            :headers="headers" 
            :config="{name: 'originalFilename', url: 'url'}"
            @callback="callback">
        </ziqirj-media-upload>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                headers: {},
                form: {
                    imageList: [],
                    videoList: []
                }
            }
        },
        methods: {
            callback(res) {
                console.log("callback", res)

                // 设置文件列表值到表单属性
                this.form[res.param] = res.affixList
            },
            uploadFn(res) {
                console.log("uploadFn", res)
            }
        }
    }
</script>

<style>

</style>

依赖组件

scss/sass

uni-icons

liu-progressbar

ksp-cropper

如使用过程中有任何问题，或者您对组件有一些好的建议，欢迎留言

紫琪程序猿