如何从后端检索图片

Question

前端是另一个服务器，并使API调用后端(Laravel)，现在我想发送回一张图片到前端，并显示它与香草js(我不知道jQuery，我是一个后端开发人员)。
图片必须只对经过认证的用户可用，所以我想符号链接不是一个选项。

信息:在前端，它只在浏览器开发人员工具的控制台中显示二进制内容，并且
还抛出以下错误:

"DOMException: Failed to execute 'btoa' on 'Window':要编码的字符串包含拉丁1范围以外的字符。">

我可以看到我的照片成功上传到/path/到/pic.

这是Laravel控制器方法:

public function getAvatar(GetAvatarRequest $request): string
{
// some code...
//..
//..
return response()->file(base_path() . '/storage/app/images/avatars/1.jpeg', ['Content-Type' => 'Image/jpeg']);
// Also tried these but no luck
// return response()->download(Storage::disk('local')->get('images/avatars/1.jpeg'), 'name', ['Content-Type' => 'Image/jpeg']);
// return Storage::disk('local')->get('images/avatars/1.jpeg');
// return response()->file(Storage::disk('local')->get('images/avatars/1.jpeg'));
}

这是我如何存储收到的图片:

Storage::putFileAs('images/avatars/', $request->avatar, $request->accountId, 'private');

这是处理后端响应的js:

let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
let myRequest = new Request('/backend/pic');
let myHeaders = new Headers();
myHeaders.append("Accept", "application/json, text-plain, */*");
myHeaders.append("X-Requested-With", "XMLHttpRequest");
myHeaders.append("X-CSRF-TOKEN", token);
myHeaders.append("Content-Type", 'image/jpeg/jpg');
let init = {
method: 'GET',
mode: 'cors',
credentials: 'same-origin',
headers: myHeaders,
};
fetch(myRequest, init).then((response) => {
console.log(response);
return getBody(response);
}).then((data) => {
console.log(data);
createAppendElm('img', {
'src': 'data:image/jpeg;base64,' + btoa(data),
'alt': 'alternative'
}, getElm('box'));
});
function getBody(response) {
const contentType = response.headers.get("content-type");
if (contentType && contentType.indexOf("application/json") !== -1) {
return response.json();
} else {
return response.text();
}
}

我的猜测是，我的javascript没有正确处理响应，所以有什么建议吗?

Answer 1

我使用的是cloudary库，它对初学者非常友好，应该不难理解。