更新记录

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

修复fileType为all，未指定suffix值时，点击按钮不弹出选择文件bug

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

• 通用文件上传组件
• 集成文件预览组件，实现文件预览

平台兼容性

ziqirj-file-upload 文件上传组件

组件名：ziqirj-file-upload 代码块： ziqirj-file-upload 关联组件：scss/sass, uni-icons, ziqirj-file-preview

插件说明

• 1、通用文件上传组件
• 2、支持图片文件预览
• 3、已上传文件支持删除

使用说明

组件参数

回调函数

@callback函数参数

使用示例

<template>
    <view style="margin: 0 15px;">
        <text>所有文件</text>
        <ziqirj-file-upload param="allList" 
            :list="form.allList" 
            :limit="5"
            :maxMN="50" 
            url='https://test.ipx.jjzqkj.cn/common/upload' 
            :headers="headers" 
            suffix="doc,docx,xls,xlsx,pdf,png,jpg,jpeg,mp3,mp4"
            :config="{name: 'originalFilename', url: 'url'}"
            @callback="callback">
        </ziqirj-file-upload>

        <text>媒体文件</text>
        <ziqirj-file-upload fileType="media"
            param="mediaList"
            :list="form.mediaList" 
            :limit="5"
            :maxMN="50" 
            url='https://test.ipx.jjzqkj.cn/common/upload' 
            :headers="headers" 
            :config="{name: 'originalFilename', url: 'url'}"
            @callback="callback">
        </ziqirj-file-upload>

        <text>手动上传</text>
        <ziqirj-file-upload param="notAutoList" 
            :list="form.notAutoList" 
            :limit="5"
            :maxMN="50" 
            :auto-upload="false"
            suffix="doc,docx,xls,xlsx,pdf,png,jpg,jpeg,mp3,mp4"
            @callback="callback"
            @upload="uploadFn">
        </ziqirj-file-upload>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                headers: {},
                form: {
                    allList: [],
                    mediaList: [],
                    notAutoList: []
                }
            }
        },
        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

ziqirj-file-preview

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

紫琪程序猿