При загрузке изображения в хранилище BLOB-объектов Azure возвращается текст
Я пытаюсь загрузить изображение в хранилище BLOB-объектов Azure с помощью RestAPI с передачей токена. На почтальоне работает. Я могу правильно загрузить загруженное изображение. Загрузка из Angular также работает, но когда я пытаюсь получить то, что я загрузил, я получаю текст вместо изображения. Ниже приведен пример, если текст. Текст ниже является частью всего текста, который я получаю.
------WebKitFormBoundaryCCltz7yE7w2qTIUX Content-Disposition: form-data; имя="файл"; filename="img3 - Copy - Copy.jpg" Content-Type: image/jpeg ����JFIF���ICC_PROFILE�0mntrRGB XYZ acsp���- desc�$rXYZgXYZ(bXYZ<�wtptPrTRCd(gTRCd(bTRCd(cprt �No᧟Js=٠+3Y��n���:�^�H @O����:�^�HJ�������vh %Y�����o|�@' 7��ό�I��w�o��x���R��gx���}`)��f�n����R��vh*��w���No᧟f �hRr������:�p�U'+]��No᧟���y�)Y�������h�9��� /��/����)�� o|�@*����)Y��� �r��@�����_?O���o|�@2S����g/_�%9^�� ?� ��i��R��gx��Y����Vf�4��{�@,���gx�9z� I��w�XJs=٠���y�:�^�H @O���y�U'+]�J�����+��Js=٠+3Y��Nf�4����K����Vf�4��k�� Vf� 4|���O>0��W���u|�>�� )3w���Y��� /����Y^������)9Z�� ����� S���%Y^�� ��r��@'7��ό)YZ�������?
Код, который я использовал для загрузки изображения
uploadFile(file: any, securedUrl: string){
this.securedUrl = securedUrl;
let reader = new FileReader();
reader.onload = (e: any) => {
const formData: FormData = new FormData();
formData.append('file', file);
formData.append('fileName', "file123");
var requestData = new Uint8Array(e.target.result);
const httpOptions = {
headers: new HttpHeaders({
'x-ms-blob-type': 'BlockBlob',
})
};
this.http.put(securedUrl, formData, httpOptions).subscribe(response => {
console.info(response);
});
};
reader.readAsArrayBuffer(file);
}
Ответы 2
Причина, по которой вы получаете эту ошибку, заключается в том, что хранилище Azure не поддерживает multipart/form-data. Что вам нужно сделать, так это прочитать содержимое вашего файла изображения в виде двоичных данных и загрузить его напрямую.
Ваш код будет выглядеть примерно так (непроверенный код):
uploadFile(file: any, securedUrl: string){
this.securedUrl = securedUrl;
let reader = new FileReader();
reader.onload = (e: any) => {
var requestData = new Uint8Array(e.target.result);
const httpOptions = {
headers: new HttpHeaders({
'x-ms-blob-type': 'BlockBlob',
})
};
this.http.put(securedUrl, requestData, httpOptions).subscribe(response => {
console.info(response);
});
};
reader.readAsArrayBuffer(file);
}
Ниже приведен обновленный код после предложения Gaurav. Второй параметр (formData) заменяется бинарным файлом, выбранным для загрузки.
uploadFile(file: any, securedUrl: string){
this.securedUrl = securedUrl;
let reader = new FileReader();
reader.onload = (e: any) => {
const httpOptions = {
headers: new HttpHeaders({
'x-ms-blob-type': 'BlockBlob',
})
};
this.http.put(securedUrl, file, httpOptions).subscribe(response => {
console.info(response);
});
};
читатель.readAsArrayBuffer(файл); }
Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, отредактируйте , чтобы добавить дополнительные сведения, такие как цитаты или документация, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти больше информации о том, как писать хорошие ответы в справочном центре.
Спасибо @Gaurav за ответ. Это сработало, как и ожидалось. Я хотел бы добавить, что я изменил в своем коде из вашего ответа. Просто передаю файл, который я выбираю для загрузки, в запросе put uploadFile(file: any, secureUrl: string){ ....... this.http.put(securedUrl, file, httpOptions).subscribe(response => { console .log(ответ);}); }; читатель.readAsArrayBuffer(файл); }