Невозможно загрузить изображение из локального хранилища с помощью интерфейса React и бэкэнда .Net

1
9

Я использую 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 г.

1 Ответ

2
Лукьян
Ответ получен7 сентября 2024 г.

Ваш ответ

Загрузить файл.