从 Vue 的输入按钮访问数据答案

【问题标题】：Accesing the data from an input button for Vue从 Vue 的输入按钮访问数据
【发布时间】：2019-01-23 15:07:55
【问题描述】：

我使用 npm (https://www.npmjs.com/package/vuetify-upload-button) 安装了 Vuetify 上传按钮。但是，关于它的文档很少，我不确定如何读取使用输入按钮时选择的数据。

HTML（部分）：

<upload-btn title="select" name="pinimage">test</upload-btn>

<v-btn
  :disabled="!valid"
  @click="submit"
>
  submit
</v-btn>

JS： （请参阅我尝试记录所选数据的提交功能）

<script>
import { mapState } from 'vuex';
import UploadButton from 'vuetify-upload-button';

export default {
    name: "addinspiration",

    components: {
        'upload-btn': UploadButton
    },

    computed: {
        ...mapState([
            'backenderror'
        ])
    },

    data: () => ({
        backenderror: '',
        valid: true,
        email: '',
        pinimage: '',
    }),

    methods: {
        submit () {
            console.log(this.pinimage.files);
            this.$store.dispatch('AddInspiration', {
                pinimage: this.pinimage.files,
            });
        },
        clear () {
            this.$refs.form.reset()
        }

    },
}

【问题讨论】：

标签： javascript npm vue.js vuex vuetify.js

【解决方案1】：

如果我没有误解你的问题，那么你也可以这样尝试。

根据其documentation，fileChangedCallback是一个文件被选中时的回调，返回一个File对象，默认值为undefined。因此，您可以使用FileReader() 来读取文件的数据。

HTML

<upload-btn :fileChangedCallback="getFile"></upload-btn>

data() {
    return {
        myFile: ''
    }
},

methods:  {
    getFile (file) {
          let vm = this
          let reader = new FileReader()

          reader.onload = e => {
              vm.myFile = e.target.result
          }
          reader.readAsDataURL(file)
     }
}

【讨论】：