Javascript 在上传到服务器之前调整图像大小以减小其大小？

Question

 <input type="file" accept="image/*" onChange={async (ev) => {

                    if (ev && ev.target && ev.target.files) {

                        const formData = new FormData();

                        formData.append("file", ev.target.files[0],  "file.jpg");

                        if(imageHTMLComponent) {

                            const imageReader = new FileReader();

                            imageReader.onload = (ev) => {

                                if( ev.target && typeof ev.target.result === "string") {

                                    test.setAttribute('src', ev.target.result);

                                }

                            }

                            imageReader.readAsDataURL(ev.target.files[0]);

                            const response = await fetch(`https://localhost:8000/test?token=${encodeURI('hello')}&picture=1`, {

                        }

                    }

                Preview of the image:

                <img ref={(ref) => {setImageHTMLComponent(ref)}} />