Buefy: Как получить двоичное содержимое файла, загруженного с помощью ‹b-upload›?

Вопрос

Когда я добавляю компонент <b-upload> на страницу, она выглядит великолепно, я могу добавлять на нее файлы и получать имена файлов. Но как мне получить содержимое файла?

Что я пробовал

  1. В документе для компонента Upload упоминаются File объекта. Когда я проверяю эти объекты в работающем коде, я вижу только метаданные файла, такие как размер и имя файла. Я не вижу никаких данных двоичного файла.
  2. Я нашел этот CodePen, который выглядит многообещающе, но выдает ошибку при попытке загрузить файл :

Не удалось выполнить «readAsText» для «FileReader»: параметр 1 не имеет типа «Blob».

Вот HTML из этого CodePen:

<div id="app" class="container">
  <b-field class="file">
    <b-upload v-model="files">
      <a class="button is-primary">
        <b-icon icon="upload"></b-icon>
        <span>Click to upload</span>
      </a>
    </b-upload>
    <span class="file-name" v-if="files && files.length">
      {{ files[0].name }}
    </span>
  </b-field>
</div>

А вот и Javascript:

Vue.use(Buefy.default);

const example = {
  data() {
    return {
      files: []
    };
  },
  watch: {
    files: function(o, n) {
      var reader = new FileReader();
      reader.onload = e => this.$emit("load", e.target.result);
      reader.readAsText(o[0]);  // This line throws the error.
      alert();
    }
  }
};

const app = new Vue(example);

app.$mount("#app");

person Martin Omander    schedule 06.12.2019    source источник


Ответы (1)


Обнаружена ошибка в CodePen, на которую я ссылался выше.

Эта строка:

reader.readAsText(o[0]);

Вместо этого должно быть так:

reader.readAsText(o);

Данные файла будут находиться в переменной e.target.result, как и в исходном коде выше.

person Martin Omander    schedule 06.12.2019