Я использую React в качестве фронтенда и контроллер .Net MVC в качестве бэкенда для хранения данных и изображений. Мне удалось загрузить фотографию из фронтенда на локальный жесткий диск с помощью MVC. Чтобы загрузить изображение, я пробовал несколько методов, но пока безуспешно. Ниже приведен мой code. Могу ли я узнать, как это делается правильно?
/**** Front End *******/
const [image, setImage] = useState('');
const handledownloadPhoto = (event) => {
event.preventDefault();
setSelectImage(false);
getPhoto();
}
const getPhoto = () => {
console.log('getting photo...');
var cookies = Cookies.get('talentAuthToken');
var photoUrl = `http://localhost:60290/profile/profile/getProfileImage?Id=${imageFile}`
axios
.get(
photoUrl,
{
headers: {
'authorization': 'bearer ' + cookies,
'content-type': 'application/json'
}
},
{
responseType: 'arraybuffer'
}
)
.then((response) => {
if (response.status === 200) {
console.log(response);
console.log('data length: ' + response.data.length);
const binaryData = response.data;
const bufferArray = new Uint8Array(binaryData).buffer;
// latest comment
var blob = new Blob([bufferArray], {
type: "image/jpeg",
});
var newImage = URL.createObjectURL(blob);
setImage(newImage);
}
})
.catch((error) => {
console.log(error);
})
}
return(
<Image
src={`data:image;base64,${image}`}
//src={`data:image/jpeg;base64,${data}`}
alt={'...loading'}
size='small'
circular
/>
<Button
className='teal float right'
onClick={handledownloadPhoto}
>
<Icon name='download' />
download
</Button>
)
/**** Back End *******/
[HttpGet("getProfileImage")]
[Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
public async Task<ActionResult> getProfileImage(string Id)
{
string profileUrl = await _documentService.GetFileURL(Id, FileType.ProfilePhoto); // return local path + filename
if (!String.IsNullOrWhiteSpace(profileUrl)){
// //var httClient = new HttpClient();
// //var imageBytes = await httClient.GetByteArrayAsync(profileUrl);
// //return ("image/jpeg;base64," + Convert.ToBase64String(imageBytes));
FileStream stream = System.IO.File.OpenRead(profileUrl);
return new FileStreamResult(stream, "image/jpeg");
}
else
{
return Json(new { Success = false });
}
}
Куприян
Вопрос задан12 мая 2024 г.