Блог

Я ищу минимальный воспроизводимый пример того, как загрузить файл из Vue.js чтобы запустить серверную часть flask через websocket и сохранить ее там. Желательно с возможностью загрузки файлов большего размера (несколько сотен МБ)

шаблон:

     <template>
  <div>
  <form id='upload-form'>
    <input
      id='file-field'
      name='file'
      type='file' @change="onFileChange">
  </form>
      <button @click="uploadFile">Upload</button>
    </div>
</template>
 

Скрипт Vue:

 export default {
  name: "UploadFile",
  data () {
    return {
      file: ''
    }
  },
  methods: {
    onFileChange (e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length) {
        return
      }
      this.file = files;
    },

    uploadFile: function (e) {
      console.log('File upload clicked')
      this.$socket.emit('upload-file', this.file)
    }
  }
}
 

Фляжка:

 # need to save file etc.
@socketio.on('upload-file')
def save_file(data):
    print("Data received")
    print(data)
 

Прямо сейчас в flak возникает ошибка при получении события загрузки файла. Ошибка появляется независимо от размера файла:

ошибка обработчика сообщений

Трассировка (последний последний вызов): Файл «~ib/python3.8/site-packages/engineio/server.py «, строка 549, в _trigger_event возвращает файл self.handlersevent «~lib/python3.8/site-packages/socketio/server.py «, строка 730, в _handle_eio_message, если pkt.add_attachment(данные): Файл «~lib/python3.8/site-packages/socketio/packet.py «, строка 118, в add_attachment вызывает ошибку ValueError(‘Неожиданное двоичное вложение’) Ошибка значения: неожиданное двоичное вложение