前端js压缩图片后怎么把图片放回input中让表单提交的是压缩后的图片而不是原图

Question

前端js压缩图片后怎么把图片放回input中让表单提交的是压缩后的图片而不是原图
部分代码:

$(function(){
        $(document).off('change',"input[type=file]").on('change',"input[type=file]",function (e){
            const imageFile = e.target.files[0]
            const imgUrl = URL.createObjectURL(imageFile)
            const imgEle = document.createElement('img')
            imgEle.src = imgUrl
            imgEle.onload = function () {
                const canvas = document.createElement('canvas')
                const ctx = canvas.getContext('2d')
                canvas.width = imgEle.width
                canvas.height = imgEle.height
                ctx.drawImage(imgEle, 0, 0)
                const datas= canvas.toDataURL('image/jpeg', 0.3)
                var arr = datas.split(','),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                const file = new File([u8arr], $("input[type=file]").name, {type: mime});
                file.lastModifiedDate = new Date();
                const arrayFiles=Arrays.from(e.target.files)
                arrayFiles.push(file);
                
            }
        });
    });

Answer 1

// 创建一个新的FormData对象
            const formData = new FormData();
            // 将压缩后的图片文件添加到FormData中
            formData.append('image', file);
            // 发送ajax请求
            $.ajax({
                url: 'your_upload_url',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    // 处理上传成功后的逻辑
                },
                error: function (xhr, status, error) {
                    // 处理上传失败后的逻辑
                }
            });