更新记录

1.0.3（2025-03-05） 下载此版本

支持uni-form验证错误样式

1.0.2（2025-02-28） 下载此版本

解决无限递归问题

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

调整iasei-preview-video文件位置

平台兼容性

iasei-files

组件介绍

本组件支持微信小程序，H5 上传图片和视频功能，支持对图片和视频的预览。

属性说明

action

上传接口地址 可以通过全局属性配置,如：

// vue2
Vue.prototype.$globalProperties.$iasei = {iaseiFiles:{action:'xxxx'}}
// vue3
app.config.globalProperties.$iasei = {iaseiFiles:{action:'xxxx'}} 

headers

设置上传的请求头部，可以定义为方法，可以全局配置,如：

// vue2
Vue.prototype.$globalProperties.$iasei = {iaseiFiles:{headers:{token:'xxxx'}}}
Vue.prototype.$globalProperties.$iasei = {iaseiFiles:{headers:()=>{return {token:'xxxx'}}}}
// vue3
app.config.globalProperties.$iasei = {iaseiFiles:{headers:{token:'xxxx'}}}
app.config.globalProperties.$iasei = {iaseiFiles:{headers:()=>{return {token:'xxxx'}}}}

propsHttp

返回结构体，可以全局配置，如：

// vue2
Vue.prototype.$globalProperties.$iasei = {iaseiFiles:{propsHttp:{res:'xxxx',url:'xxxx',name:'xxxx'}}}
// vue3
app.config.globalProperties.$iasei = {iaseiFiles:{propsHttp:{res:'xxxx',url:'xxxx',name:'xxxx'}}}

事件

插槽

使用方式

<template>
    <iasei-body title="媒体上传组件" header-background="#3fb8ff" header-color="#fff" show-back>
        <view class="content">
            <uni-section title="例子1-数组">
                <iasei-files v-model="form.files" action="http://192.168.50.108:8080/common/upload"
                    multiple></iasei-files>
            </uni-section>
            <uni-section title="例子2-字符串">
                <iasei-files v-model="form.filesStr" action="http://192.168.50.108:8080/common/upload"
                    multiple></iasei-files>
            </uni-section>
            <uni-section title="单文件">
                <iasei-files v-model="form.file"></iasei-files>
            </uni-section>
            <uni-section title="只读">
                <iasei-files v-model="form.files" readonly></iasei-files>
            </uni-section>
            <uni-section title="设置宽高">
                <iasei-files v-model="form.files" width="200rpx" height="200rpx"></iasei-files>
            </uni-section>

            <uni-section title="插槽">
                <iasei-files v-model="form.image" width="200rpx" height="200rpx" multiple>
                    <template #item="{item,preview}">
                        <image :src="item.url" class="slotImage" @click="preview()"></image>
                    </template>
                    <button>添加文件</button>
                </iasei-files>
            </uni-section>
        </view>
    </iasei-body>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                form: {
                    files: [
                        'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
                        'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
                    ],
                    filesStr: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg,https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
                    image: [
                        'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
                    ],
                    file: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
                },
                propsHttp: {
                    res: '',
                    url: 'url',
                }
            }
        },
        onLoad() {},
        methods: {
            handleStart(start) {
                start()
                console.log("倒计时开始")
            },
            handleEnd() {
                console.log("倒计时结束")
            }
        }
    }
</script>

<style>
    .content {
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        background-color: #fff;
    }

    .slotImage {
        border-radius: 50%;
        width: 100rpx;
        height: 100rpx;
        margin-right: 20rpx;
    }
</style>