TypeScript и типы загрузки файлов

avatar
Álvaro
1 июля 2021 в 17:14
901
2
1

Я пытаюсь установить типы для загрузки файла, но не могу поверить, что мне нужно определить каждое свойство объекта файла

export type FileProps = {
  path: string 
  lastModified: number
  slice: () => void
  stream: () => void
  text: () => void
  arrayBuffer: ArrayBuffer
  name: string
  size: number
  type: string
}

const [files, setFiles] = useState<FileProps[]>([])

Я загружаю несколько файлов и сохраняю их в состоянии, но затем, когда я пытаюсь добавить в форму

const formData = new FormData()

for (const file of files) {
  formData.append('files', file)
}

Я получаю сообщение об ошибке в файле

enter image description here

Источник
Explosion Pills
1 июля 2021 в 17:23
0

Я думаю, вы хотите использовать file.text, если это строковое представление текста файла. Вы также можете преобразовать ArrayBuffer в большой двоичный объект или использовать поток для создания большого двоичного объекта.

Álvaro
1 июля 2021 в 17:26
0

Мне нужно получить весь file с именем, размером и т. д., так как я передаю файл в серверную часть, он работает, если я превращаю каждый тип в any, но я получаю желтое предупреждение, должно быть лучше способ

Ответы (2)

avatar
Alex Wayne
1 июля 2021 в 17:32
3

Если вы просто используете File, вы получите именно то, что хотите:

const [files, setFiles] = useState<File[]>([])

const formData = new FormData()

for (const file of files) {
  formData.append('files', file)
}

Это должно дать вам все поля, задокументированные здесь: https://developer.mozilla.org/en-US/docs/Web/API/File

Посмотреть игровую площадку

avatar
Charlie
1 июля 2021 в 17:31
0

Вторым аргументом метода FormData.append является Blob или USVString.

Вы упомянули в комментарии, что вся структура должна быть отправлена ​​в серверную часть. Итак, вам нужно преобразовать экземпляр FormData в большой двоичный объект.

for (const file of files) {
  formData.append('files', new Blob([JSON.stringify(file)], {type : 'text/html'});)
}
Álvaro
1 июля 2021 в 17:33
0

Я получаю Argument of type 'string' is not assignable to parameter of type 'BlobPart[] | undefined'.

Charlie
1 июля 2021 в 17:35
0

Ответ отредактирован. Конструктору BLOB-объектов требуется тип массива.