Возникла проблема с добавлением свойства к объекту JS

Question

Я пытаюсь добавить свойство в объект файла.Я добавляю свойство следующим образом (я использую Vue):

<input type="file" id="fileUpload" name="file" @change="setToUploadStatus" multiple>

Метод setToUploadStatus:

setToUploadStatus (event) {
    let files = event.target.files

    Array.from(files).forEach((file) => {
        let id = this.randomString(10)
        file.id = id
        this.uploadStatus.push({
            id: id,
            name: file.name,
            uploading: false,
            uploaded: false
        })
    }

    this.uploadFile(files)
}

Метод uploadFile:

async uploadFile (files) {
    for (const file of files) {
        // Upload file with axios
    }
}

Метод randomString:

randomString (length) {
  let text = ''
  let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  for (var i = 0; i < length; i++) {
      text += possible.charAt(Math.floor(Math.random() * possible.length))
  }
  return text
}

Моя проблема в том, что он не добавляет свойство id всегда.Иногда это добавляет, иногда нет.Особенно, когда выбрано много файлов.Вот лог https://prnt.sc/kxsqhi

Что я делаю не так?Пожалуйста, помогите!

Преобразован во фрагмент здесь:

setToUploadStatus(event) {
    let files = event.target.files

    Array.from(files).forEach((file) => {
        let id = this.randomString(10)
        file.id = id
        this.uploadStatus.push({
          id: id,
          name: file.name,
          uploading: false,
          uploaded: false
        })
      }

      this.uploadFile(files)
    }

    async uploadFile(files) {
      for (const file of files) {
        // Upload file with axios
      }
    }

    randomString(length) {
      let text = ''
      let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      for (var i = 0; i < length; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length))
      }
      return text
    }

<input type="file" id="fileUpload" name="file" @change="setToUploadStatus" multiple>

Answer 1

Во-первых, из кода, который вы дали, нет ничего плохого в этом.Возможно, проблема в другом месте.

Во-вторых, я вижу, что вы хотите дать уникальный id каждому файлу.Генерация случайной строки - это хорошо, но есть вероятность, что две строки random будут одинаковыми.Вот простой способ сделать это.

new Vue({
  el: "#app",
  data: {},
  methods: {
    updateFile(event) {
      let files = event.target.files
      let uid = 0;
      Array.from(files).forEach(file => {
        file.id = ++uid;
        console.log(file);
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="file" multiple @input="updateFile" />
</div>

Эта реализация проста.

Вот ссылка JSFiddle: https://jsfiddle.net/clintonyeb/3qreb1L9/