1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
| <template> <view class="content"> <!-- 在使用的页面直接使用 --> <!-- @all 获取所有文件的回调 --> <!-- @data 获取文件的回调 --> <!-- @status 状态码的回调 --> <webdav ref="client" @all="getAll" @data="getData" @status="getStatus" />
<button @click="init">连接 webdav</button> <button @click="onPutDav">上传数据</button> <button @click="onGetDav">获取数据</button> <view class="text-area"> <text class="title">{{data}}</text> </view> <button @click="onGetAll">获取所有</button> <view class="text-area"> <text class="title">{{all}}</text> </view> </view> </template>
<script> export default { data() { return { data: '', all: [] } }, mounted() { // this.init() }, methods: { // 初始化 webdav init() { // 初始化 this.$refs.client.init({ url: 'https://jike.teracloud.jp/dav/', username: 'test', password: 'test', filePath: '/webdav', fileName: 'backup.json' }) // 单独设置上传目录和文件名 this.$refs.client.setFile({ filePath: '/webdav', fileName: 'backup.json', }) }, onGetDav() { // 触发获取数据操作 this.$refs.client.getDav() }, onGetAll() { // 获取目录下的所有文件 this.$refs.client.getAll() }, onPutDav() { // 上传数据 this.$refs.client.putDav('测试数据') }, getAll(data) { // 获取所有的文件的回调事件 this.all = data }, getData(data) { // 获取数据的回调事件 console.log('获取dav数据', data, typeof data) this.data = data }, getStatus(code) { // 状态码的回调事件 switch (code) { case '0': console.log(code, '连接成功') break; case '00': console.log(code, '连接失败') break; case '1': console.log(code, '获取目录下所有文件成功') break; case '10': console.log(code, '获取目录下所有文件失败') break; case '2': console.log(code, '上传数据成功') break; case '20': console.log(code, '上传数据失败') break; case '3': console.log(code, '获取数据成功') break; case '30': console.log(code, '获取数据失败') break; } } } } </script>
<style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; }
</style>
|