Как после обрезки фото на фронте, загрузить это фото на сервер?

Question

[Dantes589]

Добрый вечер, подскажите как после обрезки фото на фронте это обрезанное фото запаковать в File, чтобы можно было отправить на сервер, то есть вот в такой формат

Ниже пример обрезки фото на фронте

const reader = new FileReader()
 reader.onload = () => {
                    const img = new Image()
                    img.src = reader.result

                    const canvas = document.createElement('canvas')
                    canvas.width = 300
                    canvas.height = 300
                    const ctx = canvas.getContext('2d')

                    ctx.drawImage(img, 0, 0, 300, 300)
                    const src = canvas.toDataURL('image/jpeg')
                    img.src = src
                }
                reader.readAsDataURL(file)

Answer 1

[Ivan Huk]

попробуй так:

sendData = () => {

               let data = new FormData();

                let res = await makeRequest(file);

                data.append('photo', res);

                await axios.post( api.url ).then(response => {

                    console.log( response.data ) ;

                }).catch((error) => {
                    throw new Error(error.response.data);
                });

}
makeRequest = async (url) => {

    return new Promise(function (resolve, reject) {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.responseType = "blob";
        xhr.onload = () => {
            resolve(xhr.response);
        };
        xhr.send();
    });
}

Comments

[Dantes589]

Чуток не то что нужно получилось, это скорее всего из-за метода обрезки что я использовал)