Блог

Я создаю приложение, которое загружает любое изображение(.jpeg,. jpg,. png,.gif) в корзину aws s3. А затем получение ответа в виде буфера массива. Как показано здесь.

 componentDidMount = () => {
    this.fetchUserProfileImage(this.state.id).then((response) => {
        const data = response.data;
        const base64String = btoa(String.fromCharCode(...new Uint8Array(data)));
        this.setState({
            imageUrl: base64String,
        });
    });
};
fetchUserProfileImage = async (userProfileId) => {
    return await axios.get(
        `http://localhost:5000/api/v1/users/${userProfileId}/image/download`,
        {
            responseType: 'arraybuffer',
        }
    );
};
 

Поскольку ответ представляет собой буфер массива, а не фактический файл с типом mime, таким как myimage.png или ссылка на изображение.
Как мне узнать тип mime для разных изображений из этого.

 <img src={`data:image/jpeg;base64,${this.state.imageUrl}`}
                        style={{ height: 50, width: 50 }}
                        alt='Rats'/>
 

Я пробовал использовать только изображения в формате jpeg.
Но если кто-то загрузит png или gif, как я с этим справлюсь?

Получение типа mime поможет настроить data:image${mime-type} ,чтобы я мог data:image/png; data:image/jpg соответствующим образом изменить или. Есть ли какое-либо запасное значение, если загруженное мной изображение имеет формат png или gif, а значение src изображения-jpeg.

 `src={`data:image/jpeg;...}` 
 

Обновить:
Как и предполагалось, я удалил responseType:'arraybuffer' его из запроса.
Я загрузил 3 изображения .jpeg .png и .gif.
Ответ.заголовки-это:

 Object { "content-length": "4752", "content-type": "image/jpeg" }
App.js:97
Object { "content-length": "512604", "content-type": "image/jpeg" }
App.js:97
Object { "content-length": "1764904", "content-type": "image/jpeg" } 
 

И ответ.данные являются:

 "����u0000u0010JFIFu0000u0001u0001u0001u0000Hu0000Hu0000u0000��u0000Cu0000u0004u0003u0003u0003u0003u0002u0004u0003...."