更新记录

3.0.0（2025-07-17） 下载此版本

纯API式调用选择器，支持pdf、doc、zip...等所有类型文件

2.6.6（2025-06-04） 下载此版本

更新示例项目

2.6.5（2025-06-04） 下载此版本

屏蔽h5试用提示弹窗

平台兼容性

云端兼容性

uni-app(4.71)

其他

lsj-upload 全文件选择上传

右侧按钮导入插件或导入示例项目，导入的是（2.0版 H5+小程序免费），现插件已推出3.0版，完全API式调用选择器，支持pdf、doc、zip...等所有类型文件！

购买须知！！！

本插件为原创作品，已申请软件著作权保护。为尊重开发者权益，请勿未经授权转售或传播。感谢您的理解与支持！

【1.0版(性能低功能少)】 vs 【2.0版(操作复杂)】 vs 【3.0版(功能全面，操作简单，物超所值)】

本插件适用App [ Android、iOS ]、 微信小程序、H5应用

支持所有格式文件选择和上传，使用过程中有任何问题可im联系我或添加我微信，会第一时间回复您

若未及时回复可联系我wx号：lsj274962262

感谢支持！！！

3.0版文档

API式调用选择器，支持pdf、doc、zip...等所有类型文件

props

API

chooseFile参数说明 Object

upload参数说明 Object

文件处理参数说明

3.0版示例

<template>
    <view>
        <lsj-upload debug ref="lsjUploadRef"></lsj-upload>

        <view style="padding: 60rpx 30rpx;">
            <view style="color: orangered;">
                <view style="font-weight: 600;">lsj-upload3.0版</view>API式调用选择器，支持pdf、doc、zip...等所有类型文件
            </view>
            <view>API</view>
            <view>chooseFile: 选择文件</view>
            <view>upload: 上传文件</view>
            <view>abort: 终止上传</view>
            <view>getTempFilePath: 获取文件临时路径</view>
            <view>getBase: 获取文件base64</view>
            <view>getArrayBuffer: 获取文件ArrayBuffer</view>
            <view>openDocument: 打开文件</view>
            <view>deleted: 删除文件</view>
            <view>clear: 清空文件</view>
        </view>

        <view style="padding: 8rpx 60rpx;">
            <button @click="onClick">chooseFile (选择文件)</button>
        </view>

        <view style="margin-top: 60rpx;padding: 24rpx;">
            <view>已选文件返回files数组，自己写样式</view>

            <view v-for="(item,index) in files" :key="index">
                <text>文件名：{{ item.name }}</text>
                <text style="margin-left: 10rpx;">大小：{{ item.size }}</text>
                <text style="margin-left: 10rpx;">状态：{{ item.status }}</text>
                <text style="margin-left: 10rpx;">进度：{{ item.progress }}</text>
                <text v-if="item.responseText" style="margin-left: 10rpx;">服务端数据：{{ item.responseText }}</text>
                <view class="flex">
                    <text class="flex-item" @click="uploadHandle(item)">上传文件</text>
                    <text class="flex-item" @click="(item)">终止上传</text>
                    <text class="flex-item" @click="getBase(item)">获取Base64</text>
                    <text class="flex-item" @click="getArrayBuffer(item)">获取ArrayBuffer</text>
                    <text class="flex-item" @click="getTempFilePath(item)">获取临时路径</text>
                    <text class="flex-item" @click="openDocument(item)">打开文件</text>
                    <text class="flex-item" @click="del(index)">删除文件</text>
                </view>
            </view>
        </view>

        <view style="padding: 60rpx 30rpx;">
            <div style="color: blue;" @click="clear">clear (清空所有文件)</div>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                files: [],
                base64: '',
                tempFilePath: ''
            }
        },
        onLoad() {

        },
        methods: {
            // 选择文件
            onClick() {
                this.$refs.lsjUploadRef.chooseFile({
                    count: 3, // 文件可选个数
                    size: 10, // 文件大小上限兆（M）
                    success:(files) => {
                        this.files = this.files.concat(files);
                        console.log('files',files);
                        // 这个file不是文件流，是插件内需要的file对象，调用插件的其他方法时需传入这个
                        this.files.forEach(file=> {
                            // 上传到服务器
                            if (file.status === 'waiting') {
                                // 上传
                                // this.uploadHandle(file);
                            }
                        })
                    },
                    fail:(err) => {
                        console.log('选择文件失败');
                    }
                })
            },
            // 上传到服务器
            uploadHandle(file) {
                this.$refs.lsjUploadRef.upload({
                    url: 'http://ttest.shlink.com/ts/v1/oss/upload', // 更换成你自己接口地址
                    file,
                    name: 'file',
                    method: 'post',
                    header: {
                        Authorization: ''
                    },
                    formData: {},
                    :(e)=> {
                        file.status = e.status;
                        file.progress = e.progress;
                        console.log('上传中：',e.progress);
                    },
                    success:(e) => {
                        file.status = 'success';
                        console.log('上传成功',e);
                    },
                    fail:(e) => {
                        file.status = 'fail';
                        file.progress = 0;
                        console.log('上传失败',e);
                    }
                });
            },
            // 获取文件TempFilePath
            getTempFilePath(file) {
                this.$refs.lsjUploadRef.getTempFilePath({
                    file,
                    success:(e) => {
                        console.log(e.result);
                        // 图片回显示例
                        // #ifdef H5
                        // h5端
                        // 如果希望回显图片可以用URL.createObjectURL获取blob地址后再image标签src
                        this.tempFilePath = URL.createObjectURL(e.result);
                        // #endif
                        // 其他端不需要URL.createObjectURL
                        // #ifndef H5
                            this.tempFilePath = e.result;
                        // #endif

                        // 临时路径用于uni.uploadFile上传的示例
                        uni.uploadFile({
                            url: 'http://ttest.shlink.com/ts/v1/oss/upload', // 更换成你自己接口地址
                            header: {
                                Authorization: 'bearer '
                            },
                            success:(e) => {
                                console.log('success',e);
                            },
                            fail: (err) => {
                                console.log('fail',err);
                            },
                            // #ifdef H5
                            file: e.result
                            // #endif
                            // #ifndef H5
                            filePath: e.result
                            // #endif
                        })
                    }
                });
            },
            // 获取文件base64
            getBase(file) {
                this.$refs.lsjUploadRef.getBase({
                    file,
                    success:(e) => {
                        console.log('getBase',e);
                        // #ifndef MP
                            this.base64 = e.result;
                        // #endif
                        // #ifdef MP
                            this.base64 = 'data:image/png;base64,' + e.result;
                        // #endif
                    }
                });
            },
            // 获取文件ArrayBuffer
            getArrayBuffer(file) {
                this.$refs.lsjUploadRef.getArrayBuffer({
                    file,
                    success:(e) => {
                        console.log('getArrayBuffer',e);
                    }
                });
            },
            // 打开文件
            openDocument(file) {
                this.$refs.lsjUploadRef.openDocument({
                    file,
                    success:(e) => {
                        console.log('打开文件成功');
                    }
                });
            },
            // 终止上传文件
            (file) {
                if (file.status === '') {
                    this.$refs.lsjUploadRef.abort(file);
                    file.progress = 0;
                    console.log('已终止上传：',file.name);
                }
            },
            // 删除指定文件
            del(index) {
                this.$refs.lsjUploadRef.deleted(this.files[index]);
                this.files.splice(index,1);
            },
            // 清空所有文件
            clear() {
                this.$refs.lsjUploadRef.clear();
                this.files = [];
            },
        }
    }
</script>
<style scoped>
    .flex {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .flex-item {
        flex: 0 0 calc(33.333% - 10px);
        box-sizing: border-box;
        border: 1px solid blue;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 2em;
    }
</style>

-

-

2.0版文档

插件使用注意事项

2.0版通过webview实现，不支持返回文件的本地路径，上传文件必须使用组件内置的upload函数

组件如果在scroll-view内使用需要自己监听scroll事件，并在滚动结束的时候调用一次show（查看下方scroll示例）！！

控件的height、width应与slot自定义内容宽高度保持一致。

nvue窗口只能使用固定模式position=absolute 。

show() 当DOM重排后在this.$nextTick内调用show()，控件定位会更加准确。

hide() APP端webview层级比view高，如不希望触发点击时，应调用hide隐藏控件，反之调用show。

APP端请优先联调Android,上传成功后再运行iOS端。

若iOS端跨域服务端同学实在配置不好，可把hybrid下html目录放到服务器去，同源则不存在跨域问题，或者toBase传true（以base64格式上传）。

小程序端因hybrid不能使用本地HTML，所以插件提供的是从微信消息列表拉取文件并选择，请知悉。

上传报status：0 问题排查

App如果上传报status: 0，调试方法：关闭manifest.json>h5的代理(若有配置代理)，并运行项目至Chrome浏览器，按F12查看接口详细报错信息（重点：是Chrome,不是HX内置浏览器）

Android端不存在跨域问题，如上传报status: 0时

1、如果能进入接口，但收不到任何参数，检查是否在option>header里传入了Content-Type属性（默认不需要传，会自动匹配，若接口要求必须传则需要与接口匹配）

2、如果未能进入接口，检查nginx网关配置，不清楚可加群查看群相册资料。

iOS端若出现status：0，排除上面两个问题后只会是跨域问题

1、后端处理允许上传接口跨域。（前端无需修改）

2、若后端不放开跨域，可将hybrid>html文件夹放入与接口同源的服务器，同源访问则不存在跨域问题。（可加群查看群相册资料）

使用说明

【2.3.0】新增uni.$emit事件监听

使用示例

this.$nextTick(()=>{
    // 更新当前页所有上传组件在页面中的位置
    uni.$emit('$upload-show',{});
})

$Refs

option说明

progress返回对象字段说明

以下演示为vue窗口使用方式，nvue使用区别是必须传入控件绝对位置如top，bottom，left，right，且position只能为absolute，如不清楚可点击右侧导入示例项目有详细演示代码。

vue:

<view>
    <view class="header-bg">
        <view class="header">基本使用示例</view>
    </view>
    <view style="padding: 30rpx;" v-for="(v,i) in data" :key="'data_'+i">{{v}}</view>
    <!-- #ifndef MP-WEIXIN -->
    <view v-for="(item,index) in files.values()" :key="'file_'+index">
        <image style="width: 100rpx;height: 100rpx;" :src="item.path" mode="widthFix"></image>
        <text>{{ item.name }}</text>
        <text style="margin-left: 10rpx;">大小：{{ item.size }}</text>
        <text style="margin-left: 10rpx;">状态：{{ item.type }}</text>
        <text style="margin-left: 10rpx;">进度：{{ item.progress }}</text>
        <text v-if="item.responseText" style="margin-left: 10rpx;">服务端数据：{{ item.responseText }}</text>
        <text style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;" @click="clear(item.name)">删除</text>
    </view>
    <!-- #endif -->

    <!-- #ifdef MP-WEIXIN -->
    <view v-for="(item,index) in wxFiles" :key="'file_'+index">
        <text>{{ item.name }}</text>
        <text style="margin-left: 10rpx;">大小：{{ item.size }}</text>
        <text style="margin-left: 10rpx;">状态：{{ item.type }}</text>
        <text style="margin-left: 10rpx;">进度：{{ item.progress }}</text>
        <view>
            <button @click="clear(item.name)">删除</button>
        </view>
    </view>
    <!-- #endif -->

    <lsj-upload 
    ref="lsjUploadRef"
    debug
    :count="count"
    :width="width"
    :height="height"
    :option="option"
    :toBase="toBase"
    @changeFile="onChange"
    @progress=""
    @uploadEnd="onuploadEnd"
    >
        <view style="background-color: #007AFF;" :style="{width: width,height: height}">自定义选择按钮</view>
    </lsj-upload>
    <view class="bottom-btn flex">
        <button @click="add">在按钮上方添加数据</button>
        <button @click="onsetFiles">setFiles同步文件</button>
    </view>
</view>

• 函数说明

export default {
    data() {
        return {
            data: ['DOM重排演示'],
            option: {
                // 上传服务器地址，该地址非真实路径，需替换为你项目自己的接口地址
                url: 'http://iestest.com/dropbox/document/upload',
                // 上传附件的key
                name: 'file',
                // 请求头,默认不要写content-type,让浏览器自适配
                header: {},
                // 额外参数
                formData: {}
            },
            width: '180rpx',
            height: '180rpx',
            count: 9,
            toBase: false,
            // 文件回显列表
            files: new Map(),
        }
    },
    onReady() {
        // 模拟异步请求数据并在按钮上方渲染
        setTimeout(()=> {
            this.add();
        },2000)
    },
    methods: {
        onsetFiles() {
            let files1 = [{name: '测试文件名称.png'},{name: '测试文件名称2.png',}];
            let files2 = new Map();
            files2.set('测试文件名称.png',{name: '测试文件名称.png'});
            this.$refs.lsjUploadRef.setFiles(files2)
        },
        add() {
            this.data.push('在按钮上方动态添加了数据，此时需要调用组件的show刷新透明层top');
            this.$nextTick(()=> {
                uni.$emit('$upload-show',{});
            })
        },
        // 移除某个文件
        clear(name) {
            // name=指定文件名，不传name默认移除所有文件
            this.$refs.lsjUploadRef.clear(name);
        },
        // 某文件上传结束回调(成功失败都回调)
        onuploadEnd(item,childId) {
            console.log(`${item.name}已上传结束，上传状态=${item.type}`);
            // 更新当前窗口状态变化的文件
            this.files.set(item.name,item);

            // ---可删除--演示上传完成后取服务端数据
            if (item['responseText']) {
                console.log('演示服务器返回的字符串JSON转Object对象');
                this.files.get(item.name).responseText = JSON.parse(item.responseText);
            }

            // 微信小程序Map对象for循环不显示，所以转成普通数组，
            // 如果你用不惯Map对象，也可以像这样转普通数组，组件使用Map主要是避免反复文件去重操作
            // #ifdef MP-WEIXIN
            this.wxFiles = [...this.files.values()];
            // #endif

            // 强制更新视图
            this.$forceUpdate();

            // ---可删除--演示判断是否所有文件均已上传成功
            let isAll = [...this.files.values()].find(item=>item.type!=='success');
            if (!isAll) {
                console.log('已全部上传完毕');
            }
            else {
                console.log(isAll.name+'待上传');
            }

        },
        // 上传进度回调
        (item,childId) {
            // 更新当前状态变化的文件
            this.files.set(item.name,item);

            // 微信小程序Map对象for循环不显示，所以转成普通数组
            // #ifdef MP-WEIXIN
            this.wxFiles = [...this.files.values()];
            // #endif

            // 强制更新视图
            this.$forceUpdate();

        },
        // 文件选择回调
        onChange(files,childId) {
            console.log('已选择的文件Map',JSON.stringify([...files]));
            // 更新选择的文件 
            this.files = files;
            // 强制更新视图
            this.$forceUpdate();

            // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
            // #ifdef MP-WEIXIN
            this.wxFiles = [...this.files.values()]; 
            // #endif

            // ---可删除--演示重新定位覆盖层控件
            this.$nextTick(()=>{
                console.log('演示重新定位 (提示：像示例里文件列表在按钮上方时就需要插入文件后更新webview位置)');
                // 直接更新当前页面所有上传组件webview位置
                uni.$emit('$upload-show',{});
            });

        }
    }
}

温馨提示

• 文件上传
  1. APP端请优先联调Android,上传成功后再运行iOS端，如iOS返回status=0则需要后端开启允许跨域；
  2. header的Content-Type类型需要与服务端要求一致，否则收不到附件（服务端若没有明文规定则“不传”，使用默认匹配）
  3. 服务端不清楚怎么配置跨域可加群咨询
  4. 欢迎加入QQ讨论群：

     交流群4：413918560

     交流群3：667530868

     交流群2：469580165

     交流群1：701468256