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

相關文章
相關標籤/搜索