关于uniapp:uniapp实现文件选择上传支持App小程序H5

lsj-upload

插件地址：https://ext.dcloud.net.cn/plugin?id=5459

不分明应用形式可点击右侧导入示例我的项目运行残缺示例

此次更新2.0与1.0应用形式略有差别，已应用1.0的同学自行斟酌是否更新到2.0版本！！！

应用插件有任何问题欢送退出QQ探讨群：

• 群1：701468256（已满）
• 群2：469580165（已满）
• 群3：667530868

若能帮到你请高抬贵手点亮5颗星~

重要提醒

组件是窗口级滚动，不要在scroll-view内应用！！

组件是窗口级滚动，不要在scroll-view内应用！！

组件是窗口级滚动，不要在scroll-view内应用！！

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

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

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

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

若iOS端跨域服务端同学切实配置不好，可把hybrid下html目录放到服务器去，同源则不存在跨域问题。

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

file对象不是object对象，也不能转json字符串，如果你打印file那就是{}，能够打印file.name和file.size。

返回的path是个blob类型，仅供用于文件回显，插件已内置好上传函数，调用上传会主动提交待上传文件，若非要本人拿path去搞上传那你本人解决。

应用阐明

option阐明

ref调用

progress返回对象字段阐明

以下演示为vue窗口应用形式，nvue应用区别是必须传入控件相对地位如top，bottom，left，right，且position只能为absolute，如不分明可点击右侧导入示例我的项目有具体演示代码。

vue:

<lsj-upload 
    ref="lsjUpload"
    childId="upload1"
    :width="width"
    :height="height"
    :option="option"
    :size="size"
    :formats="formats"
    :debug="debug"
    :instantly="instantly"
    @uploadEnd="onuploadEnd"
    @progress="onprogress"
    @change="onChange">
        <view class="btn" :style="{width: width,height: height}">抉择附件</view>
</lsj-upload>


<view class="padding">
            
    <view>已抉择文件列表：</view>
    
    <!-- #ifndef MP-WEIXIN -->
    <view v-for="(item,index) in files.values()" :key="index">
        <image style="width: 100rpx;height: 100rpx;" :src="item.path" mode="widthFix"></image>
        <text>提醒：【path次要用于图片视频类文件回显，他用自行处理】：{{item.path}}</text>
        <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 style="margin-left: 10rpx;" v-if="item.responseText">服务端返回演示：{{item.responseText}}</text>
        <text @click="resetUpload(item.name)" v-if="item.type=='fail'" style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;">从新上传</text>
        <text @click="clear(item.name)" style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;">删除</text>
    </view>
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <view v-for="(item,index) in wxFiles" :key="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="resetUpload(item.name)">从新上传</button>
            <button @click="clear(item.name)">删除</button>
        </view>
    </view>
    <!-- #endif -->
    
</view>

• 函数阐明

export default {
    data() {
        return {
            // 上传接口参数
            option: {
                // 上传服务器地址，须要替换为你的接口地址
                url: 'http://hl.j56.com/dropbox/document/upload', // 该地址非实在门路，需替换为你我的项目本人的接口地址
                // 上传附件的key
                name: 'file',
                // 依据你接口需要自定义申请头,默认不要写content-type,让浏览器自适配
                header: {
                    // 示例参数可删除
                    'Authorization': 'bearer eyJhbGciOiJSUzI1NiIsI',
                    'uid': '99',
                    'client': 'app',
                    'accountid': 'DP',
                },
                // 依据你接口需要自定义body参数
                formData: {
                    // 'orderId': 1000
                }
            },
            // 抉择文件后是否立刻主动上传，true=抉择后立刻上传
            instantly: true,
            // 必传宽高且宽高应与slot宽高保持一致
            width: '180rpx',
            height: '180rpx',
            // 限度容许上传的格局，空串=不限度，默认为空
            formats: '',
            // 文件上传大小限度
            size: 30,
            // 文件数量限度
            count: 2,
            // 文件回显列表
            files: new Map(),
            // 微信小程序Map对象for循环不显示，所以转成一般数组，不要问为什么，我也不晓得
            wxFiles: [],
            // 是否打印日志
            debug: true,
            
            
            // 演示用
            tabIndex: 0,
            list:[], 
        }
    },
    onReady() {
        setTimeout(()=>{
            console.log('----演示动静更新参数-----');
            this.$refs['lsjUpload'+this.tabIndex].setData('formData.orderId','动静设置的参数'); 
            
            console.log('以下正文内容为-动静更新参数更多演示，放开后可查看演示成果');
            // 批改option对象的name属性
            // this.$refs.lsjUpload.setData('name','myFile');
            
            // 批改option对象的formData内的属性
            // this.$refs.lsjUpload.setData('formData.appid','1111');
            
            // 替换option对象的formData
            // this.$refs.lsjUpload.setData('formData',{appid:'222'});
            
            // option对象的formData新增属性
            // this.$refs.lsjUpload.setData('formData.newkey','新插入到formData的属性');
            
            
            // ---------演示初始化值，用于已提交后再次编辑时需带入已上传文件-------
            // 形式1=传入数组
            // let files1 = [{name: '1.png'},{name: '2.png',}];
            
            // 形式2=传入Map对象
            // let files2 = new Map();
            // files2.set('1.png',{name: '1.png'})
            
            // 此处调用setFiles设置初始files
            // this.$refs.lsjUpload.setFiles(files1);
            
            // 初始化tab
            this.onTab(0);
        },2000)
    },
    methods: {
        // 某文件上传完结回调(成功失败都回调)
        onuploadEnd(item) {
            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+'待上传');
            }
            
        },
        // 上传进度回调
        onprogress(item) {
            // 更新以后状态变动的文件
            this.files.set(item.name,item);
            
            console.log('打印对象',JSON.stringify(this.files.get(item.name)));
            // 微信小程序Map对象for循环不显示，所以转成一般数组，不要问为什么，我也不晓得
            // #ifdef MP-WEIXIN
            this.wxFiles = [...this.files.values()];
            // #endif
            
            // 强制更新视图
            this.$forceUpdate();
            
        },
        // 文件抉择回调
        onChange(files) {
            console.log('以后抉择的文件列表：',JSON.stringify([...files.values()]));
            // 更新抉择的文件 
            this.files = files;
            // 强制更新视图
            this.$forceUpdate();
            
            // 微信小程序Map对象for循环不显示，所以转成一般数组，不要问为什么，我也不晓得
            // #ifdef MP-WEIXIN
            this.wxFiles = [...this.files.values()];
            // #endif
            
            // ---可删除--演示从新定位覆盖层控件
            this.$nextTick(()=>{
                console.log('演示从新定位');
                this.$refs.lsjUpload0.show();
                this.$refs.lsjUpload1.show();
                this.$refs.lsjUpload2.show();
            });
            
        },
        // 手动上传
        upload() {
            // name=指定文件名，不指定则上传所有type等于waiting和fail的文件
            this.$refs['lsjUpload'+this.tabIndex].upload();
        },
        // 指定上传某个文件
        resetUpload(name) {
            this.$refs['lsjUpload'+this.tabIndex].upload(name);
        },
        // 移除某个文件
        clear(name) {
            // name=指定文件名，不传name默认移除所有文件
            this.$refs['lsjUpload'+this.tabIndex].clear(name);
        },
        /**
         * ---可删除--演示在组件上方增加新内容DOM变动
         * DOM重排演示，重排后组件外部updated默认会触发show办法,若非凡状况未能触发updated也能够手动调用一次show()
         * 什么是DOM重排？自行百度去
         */
        add() {
            this.list.push('DOM重排测试');
        },
        /**
         * ---可删除--演示Tab切换时覆盖层是否能被点击
         * APP端因为是webview，层级比view高，此时若不心愿点击触发抉择文件，须要手动调用hide()
         * 手动调用hide后，须要调用show()能力复原覆盖层的点击
         */
        onTab(tabIndex) {
            this.$refs.lsjUpload0.hide();
            this.$refs.lsjUpload1.hide();
            
            this.tabIndex = tabIndex;
            
            this.$nextTick(()=>{
                this.$refs['lsjUpload'+this.tabIndex].show();
            })
            
        },
        /**
         * 关上nvue窗口查看非追随窗口滚动成果
         */
        open() {
            uni.navigateTo({
                url: '/pages/nvue-demo/nvue-demo'
            });
        }
    }
}

舒适提醒

• 文件上传
• 如阐明表白还不够分明，不分明怎么应用可导入残缺示例我的项目运行体验和查看
• APP端请优先联调Android,上传胜利后再运行iOS端，如iOS返回status=0则须要后端开启容许跨域；
• header的Content-Type类型须要与服务端要求统一，否则收不到附件（服务端若没有明文规定则可不写，应用默认匹配）
• 服务端不分明怎么配置跨域可加群征询，具体百度~
• 欢送退出QQ探讨群：701468256(已满)
• 欢送退出QQ探讨群：469580165(已满)
• 欢送退出QQ探讨群：667530868
• 若能帮到你还请点亮5颗小星星以作激励哈~
• 若能帮到你还请点亮5颗小星星以作激励哈~
• 若能帮到你还请点亮5颗小星星以作激励哈~