Хобрук: Ваш путь к мастерству в программировании

Как создать измененную копию объекта File в JavaScript?

Свойства файлов, полученных от <input type="file">, доступны только для чтения.

Например, следующая попытка перезаписать file.name либо завершится неудачно, либо выдаст TypeError: Cannot assign to read only property 'name' of object '#<File>'.

<input onchange="onchange" type="file">

onchange = (event) => {
    const file = event.target.files[0];
    file.name = 'foo';
}

Попытка создать копию через Object.assign({}, file) не удалась (создал пустой объект).

Так как же клонировать объект File?

javascript file clone copy
07.12.2016

Ответы:


1

Мое решение лежало в конструкторе File:

https://developer.mozilla.org/en-US/docs/Web/API/File#Implementation_notes

Что само по себе является расширением Blob:

https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob

let file = event.target.files[0];
if (this.props.distro) {
    const name = 'new-name-here' + // Concat with file extension.
        file.name.substring(file.name.lastIndexOf('.'));
    // Instantiate copy of file, giving it new name.
    file = new File([file], name, { type: file.type });
}

Обратите внимание, что первый аргумент File() должен быть массивом, а не просто исходным файлом.

07.12.2016

2

Вы можете использовать FormData.prototype.append(), который также преобразует объект Blob в объект File.

let file = event.target.files[0];
let data = new FormData();
data.append("file", file, file.name);
let _file = data.get("file");
07.12.2016

3

Более кроссбраузерное решение

Принятый ответ работает и для меня в современных браузерах, но, к сожалению, не работает в IE11, поскольку IE11 не поддерживает конструктор File. Однако IE11 поддерживает конструктор Blob, поэтому его можно использовать в качестве альтернативы.

Например:

var newFile  = new Blob([originalFile], {type: originalFile.type});
newFile.name = 'copy-of-'+originalFile.name;
newFile.lastModifiedDate = originalFile.lastModifiedDate;

Источник: MSDN — Как создать экземпляр файла с помощью файлового API HTML 5?

18.04.2019
Новые материалы
ВЫ РЕГРЕСС ЭТО?
Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..
Не зря же это называют интеллектом
Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
LeetCode Проблема 41. Первый пропущенный положительный результат
LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
Расистский и сексистский робот, обученный в Интернете
Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
Управление состоянием в микрофронтендах
Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..
Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...
LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..
Структуры данных в C ++ - Часть 1
Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..