該組件使用 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