Question

虽然我没有任何错误，但是没有显示图像，因为它在POSTMAN上显示完美。我使用res.json（），收到“位置0中的意外令牌<”。然后我尝试使用res.text（），可以使用res.blob（），但是当我将其与url = URL.createObjectURL（blob）一起使用时。我得到了一个不同的文件名，该文件名无法从API中检索出来进行显示。我知道有很多关于堆栈溢出的参考，但是与我打算做的不同，随着我尝试了很多选择，它变得越来越复杂。

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));

谢谢

Answer 1

首先，您的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});
              }
            });
          }
        });

进一步阅读...

enter link description here

响应中的Blob（）未显示原始图片网址，但显示了大小和类型

1 个答案: