如何用CropperJS裁剪后的DataURL替换FineUploader初始上传图片？

我懂你现在的需求——就是要把Cropper裁剪好的图片替换掉FineUploader里原本准备上传的那张，这样最终传到服务器的就是裁剪后的版本对吧？其实核心就是把裁剪得到的DataURL转换成FineUploader能识别的Blob/File对象，再更新对应的文件条目就行，下面给你一步步说怎么做：

1. 先写个DataURL转Blob的工具函数 #

因为Cropper输出的是DataURL，但FineUploader需要的是Blob或者File对象，所以得先做个转换：

function dataURLtoBlob(dataURL) {
    const arr = dataURL.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    
    return new Blob([u8arr], { type: mime });
}

2. 改造裁剪按钮的点击事件 #

首先得把当前操作的文件ID存起来（比如存在模态框的data属性里），这样点击裁剪确认按钮时能找到对应的文件。先修改打开模态框的代码：

$(document).on('click','.qq-upload-crop',function(e){ 
    const fileId = $(this).parent('li').attr('qq-file-id'); 
    // 把文件ID存到模态框，方便后续使用
    $('#crop-modal').data('file-id', fileId);
    
    const originalFile = manualUploader.getFile(fileId); 
    const reader = new FileReader(); 
    
    reader.onload = function (e) { 
        $('#cimgx').attr('src', e.target.result); 
    }; 
    
    reader.readAsDataURL(originalFile); 
    setTimeout(initCropper, 1000); 
    $('#crop-modal').modal('show'); 
});

3. 更新裁剪确认逻辑，替换待上传文件 #

现在修改模态框里的裁剪按钮点击事件，把裁剪后的图片替换掉FineUploader里的原文件：

$('#crop').on('click',function(e){ 
    // 获取裁剪后的图片DataURL
    const croppedDataURL = $('#cimgx').cropper('getCroppedCanvas').toDataURL('image/jpeg');
    // 转成Blob对象
    const croppedBlob = dataURLtoBlob(croppedDataURL);
    
    // 取出之前存的文件ID
    const fileId = $('#crop-modal').data('file-id');
    const originalFile = manualUploader.getFile(fileId);
    
    // 创建新的File对象，保留原文件名（也可以自定义文件名）
    const croppedFile = new File([croppedBlob], originalFile.name, { type: 'image/jpeg' });
    
    // 关键一步：用FineUploader的setFile方法替换原文件
    manualUploader.setFile(fileId, croppedFile);
    
    // 清理Cropper实例并关闭模态框
    $('#cimgx').cropper('destroy');
    $('#crop-modal').modal('hide');
    
    console.log("已替换为裁剪后的图片，现在可以执行上传操作啦");
});

几个关键点说明 #

• manualUploader.setFile()是FineUploader提供的核心方法，能直接替换指定ID的文件内容，这是实现替换的关键
• 一定要把DataURL转成Blob/File，FineUploader不支持直接上传DataURL格式的内容
• 保留原文件名是为了让用户体验更连贯，你也可以根据需求改成自定义的文件名

内容的提问来源于stack exchange，提问作者melvnberd