Question

我使用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()
        }

    },
}

Answer 1

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

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

HTML

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

JS

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

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

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

从Vue的输入按钮访问数据

1 个答案: