如何使用pouchdb和vue js保存和检索文件

时间:2017-08-03 17:16:36

标签: vue.js vuejs2 onsen-ui pouchdb

有人可以帮助我了解如何在pouchdb上传文件并在页面上显示这些上传的文件。我想上传一个包含该文件名称信息的文件。当我使用控制台检查获取文件时,我可以看到[对象对象]。我做对了吗?任何建议都很受欢迎。这是我的代码。

//Notes.vue
// By the way Im using onsen ui for this

<template>
<v-ons-page>
    <v-ons-list>

        <v-ons-list-header>Auditing</v-ons-list-header>
        <v-ons-list-item  v-for="note in notes">
            <div class="left">
                <img src="" alt="">
            </div>

            <div class="center">
                <span>{{ note._attachment['files'].data }} File here</span>
            </div>
        </v-ons-list-item>
    </v-ons-list>


    // Customize form for uploading file and info

    <v-ons-alert-dialog 
        modifier="rowfooter"
        :visible.sync="dialogVisible"
    >
        <span slot="title">Create a Note</span>

                //File name of the file
                <v-ons-input float
                placeholder="Name of note"
                v-model="name"
                >
                </v-ons-input>

                // File 
                <v-ons-input type="file" @change="onFileChange"></v-ons-input>

                <v-ons-button @click="addNotes(name)">Submit</v-ons-button>


    </v-ons-alert-dialog>
  </v-ons-page>
</template>

//这里有上传和阅读上传文件的方法

<script>

import PouchDB from 'pouchdb'

var db = new PouchDB('reviewerdb')

export default {

    data() {
        return {
            dialogVisible: false,
            notes: [],
            file: '',
            name: '', 
            path
        }
    },

    mounted() {
        this.getNotes();

        print('notes: ' + this.notes);
    },

//仅添加解释的方法

    methods: {

        onFileChange(event) {

            this.file = event.target.files[0];

        },
        addNotes() {
            db.put({
                _id: 'notes',
                _attachments: {
                    "file": {
                        type: this.file.type,
                        data: this.file
                    }
                }
            })

        },
        getNotes() {
            db.get('notes', {attachments:true}).then(function (note) {

                this.notes = note;

            });
        }
    }
}

0 个答案:

没有答案