uni-app选择并上传文件,下载、预览-支持ios-android-微信小程序

该组件使用 input 上传,主要用于wordpdf等文件。
组件下载地址vue

<template>android

<view>
    <l-file ref="lFile" @up-callback="upCallback"></l-file>
</view>

</template>ios

<script>微信

import lFile from '@/components/l-file/l-file.vue'
export default {
    components:{lFile},
    data() {
        return {
            localPath: '',
            tip: `
                纯粹是看你们对选择文件多端上传需求比较大\n
                又得不到好的解决\n
                因此只好本身写了一个不须要集成原生插件的上传顺便分享给你们\n
                这里只作了“微信端、android、ios”的上传\n
                h5及其余端本身改改(由于APP使用了plus)\n
                但愿能帮到你\n
                不喜勿喷,不要期待更新,我很懒\n
                `,
        }
    },
    methods: {
        /* 预览 */
        onOpenDoc() {
            let url = 'https://doc.wendoc.com/word/bde80cbcc2948a222a29694e150750c7759e81050-1.doc';
            this.$refs.lFile.download(url)
            .then(path=>{
                this.$refs.lFile.open(path);
            });
        },
        /* 保存 */
        onDown() {
            let url = 'https://doc.wendoc.com/word/bde80cbcc2948a222a29694e150750c7759e81050-1.doc';
            this.$refs.lFile.download(url,'local')
            .then(path=>{
                this.localPath = path;
            }); 
        },
        /* 上传 */
        onUpload() {
            this.$refs.lFile.upload({
                currentWebview: this.$mp.page.$getAppWebview(),
                url: 'https://www.example.com/upload',
                name: 'file',
                //...其余参数
            });
        },
        upCallback(res) {
            console.log('上传成功回调',JSON.stringify(res));
        }
    }
}

</script>this

相关文章
相关标签/搜索