Blob () в ответе не отображает URL исходного изображения, а имеет размер и тип - PullRequest
Новая
       10

Blob () в ответе не отображает URL исходного изображения, а имеет размер и тип

1 голос
/ 14 апреля 2019

Хотя у меня нет никаких ошибок, но вместо того, чтобы отображать изображение, поскольку оно отлично отображается на POSTMAN.Я использовал res.json (), я получил «неожиданный токен <в позиции 0».Затем я попытался res.text (), и я могу использовать res.blob (), но когда я использовал его с url = URL.createObjectURL (blob).Я получил другое имя файла, которое не может быть получено из API для отображения.Я знаю, что есть несколько ссылок на переполнение стека, но они отличаются от того, что я собираюсь сделать, и это становится все сложнее, когда я пробую так много вариантов. </p> 

fetch(url, {
              method: 'POST',
              body: uploadData,
              headers: {
                // 'X-Requested-With': 'XMLHttpRequest',
                // 'Accept': 'application/json',
                'Authorization': 'Bearer ' + this.bearerToken,
                // 'Content-Type': 'multipart/form-data',
              }
            }).then(res => res.blob()).then((response) => {
              if (response) {
                console.log(response);
                // const slashIndex = response.lastIndexOf('/');
                // const filename = response.substring(slashIndex + 1);
                // this.openUploadConfirmDialog(filename, shareOption);
              }
            }).catch((error) => {
              if (error) {
                console.log('Error', error);
                this.snackBar.open('Unable to upload image, Try again later!', '', {duration: 4000});
              }
            });
          }
        });

И это API,

Это ответная реакция;возвращение 

response()->file(storage_path('app/uploads/images/'.$exportName));

Спасибо

1 Ответ

1 голос
/ 15 апреля 2019

Во-первых, у вас нет проблем с вашим API, это хорошо написано. Проблема заключается в API углового извлечения, который не завершен, а также забит некоторыми несоответствующими кодами. Я очистил ваш код и переписал его несколькими строчками.

Использование FileReader () является секретным. В вашем коде Laravel вы возвращаете файл изображения, а в своем javascript вы должны использовать blob, а не Text () и JSON () 

fetch(url, {
              method: 'POST',
              body: uploadData,
              headers: {
                'Authorization': 'Bearer ' + this.bearerToken,
              }
            }).then(res => res.blob()).then((response) => {
              if (response) {
                const reader = new FileReader();
                reader.onloadend = function () {
                  console.log(reader.result);
                };
                reader.readAsDataURL(response);
              }
            }).catch((error) => {
              if (error) {
                console.log('Error', error);
                this.snackBar.open('Unable to upload image, Try again later!', '', {duration: 4000});
              }
            });
          }
        });

Для дальнейшего чтения ...

введите описание ссылки здесь

...