如何将Heic2Any转换后的JPG文件添加到文件表单元素以支持PHP上传？

嘿，我来帮你搞定这个问题！你已经用Heic2Any成功把HEIC转成JPG Blob了，接下来核心就是把这个Blob变成能被表单识别的File对象，然后让它能跟着表单一起上传，这样PHP端就能通过$_FILES获取到啦。我给你两种常用的实现方式：

方法1：更新原文件输入框 #

文件输入框的value属性是只读的，没法直接赋值，但我们可以用DataTransfer对象来模拟用户选择文件的操作，把转换后的JPG文件塞进去：

$('#image-input').on('change', function(ev) {
    var blob = ev.target.files[0];
    heic2any({
        blob: blob,
        toType: "image/jpeg",
    })
    .then(function (resultBlob) {
        // 把Blob转成File对象，保留原文件名并替换后缀为.jpg
        const originalFileName = blob.name;
        const jpgFileName = originalFileName.replace(/\.heic$/i, '.jpg');
        const jpgFile = new File([resultBlob], jpgFileName, { type: 'image/jpeg' });

        // 创建DataTransfer对象来模拟文件选择
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(jpgFile);
        // 替换原输入框的文件列表
        this.files = dataTransfer.files;
    }.bind(this)) // 绑定this，让内部this指向文件输入元素
    .catch(function (x) {
        var error = "Error code: " + x.code + " " + x.message;
        console.log(error);
    });
});

这样操作后，原文件输入框就会显示转换后的JPG文件，当你提交整个表单时，这个文件会和表单其他数据一起上传，PHP端通过$_FILES['image-input']就能访问到它。

方法2：用FormData直接构造上传数据 #

如果不需要更新页面上的文件输入框，想直接异步上传转换后的文件，用FormData是更灵活的选择：

$('#image-input').on('change', function(ev) {
    var blob = ev.target.files[0];
    heic2any({
        blob: blob,
        toType: "image/jpeg",
    })
    .then(function (resultBlob) {
        // 转成File对象
        const originalFileName = blob.name;
        const jpgFileName = originalFileName.replace(/\.heic$/i, '.jpg');
        const jpgFile = new File([resultBlob], jpgFileName, { type: 'image/jpeg' });

        // 构造FormData，把文件加进去
        const formData = new FormData();
        // 这里的键名"uploaded_file"要和PHP端$_FILES的键对应
        formData.append('uploaded_file', jpgFile);
        // 如果需要加其他表单字段，也可以用formData.append('字段名', '值')

        // 用fetch发起异步上传
        fetch('你的PHP脚本路径.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.text())
        .then(uploadResult => {
            console.log('上传成功，返回结果:', uploadResult);
        })
        .catch(uploadError => {
            console.error('上传出错:', uploadError);
        });
    })
    .catch(function (x) {
        var error = "Error code: " + x.code + " " + x.message;
        console.log(error);
    });
});

这种方式下，PHP端直接通过$_FILES['uploaded_file']就能获取到转换后的JPG文件，不需要依赖原表单的提交，适合无刷新上传的场景。

小提示 #

• 转换后的文件名建议保留原文件名并替换后缀为.jpg，这样上传后文件名更直观，也避免了后缀不匹配的问题。
• 要确保File构造函数的type参数设为image/jpeg，这样PHP端能正确识别文件类型。

备注：内容来源于stack exchange，提问作者occitan