Могу ли я установить имя файла в данных blob, когда я загружаю данные на сервер с помощью html5?

Я использую event.clipboardData для получения изображения из буфера обмена, а затем загружаю его на сервер, код:

var items = e.clipboardData.items;
for(var i=0;i<items.length;i++)
{
    if(items[i].type.indexOf("image")!=-1)
    {
        var blob=items[i].getAsFile();
        var data = new FormData();
        data.append("ImageFileField",blob);
        _post2("url...",data);
    }
}

ПРИМЕЧАНИЕ. _post2() - это функция, использующая XMLHttpRequest для работы с загрузкой.

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

НО Я нашел проблему, имя файла загрузки изображения на сервер исправлено как "blob", можно ли изменить имя файла перед загрузкой на сервер?

Это подробная информация о загрузке:

Запрос полезной нагрузки

------WebKitFormBoundaryW0NQVOkdrfkYGWV3
Content-Disposition: form-data; имя = "%% File.48257279001171c9.2c36671da7f1b6c9482575de002e1f14 $ Body.0.3D8."; filename = "blob"

Content-Type: image/png

------WebKitFormBoundaryW0NQVOkdrfkYGWV3 -

Ответ 1

Согласно FormData, вы должны иметь возможность добавить параметр имени файла к data.append() следующим образом:

data.append("ImageFileField", blob, "imageFilename.png");

Ответ 2

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

blob.name = "imageFilename.png"

После этого ваши JS-функции должны быть в состоянии забрать его. Я использую загрузку файла jQuery, и это работает с ним.

Ответ 3

Я столкнулся с той же проблемой, что во время загрузки, имя файла не присваивается multipart с объектом blob, но после большого количества Google и RND. Я нахожу простой и лучший подход к этой проблеме.

 let file = event.target.files[0];
 this.fileName = file.name;   // Like : abc.jpeg

 this.croppedImage = file  //blob object after cropping
 const formData = new FormData();
 formData.append('file',this.croppedImageSend,this.fileName);
 this.http.post(url, formData, headersOptions)