如何将FineCrop处理后的图片数据传入file类型input标签？

由于原生<input type="file">的value属性是只读的，无法直接赋值，我们需要通过构造Blob和File对象，再替换输入框的files集合来实现需求，具体步骤如下：

1. 将base64格式的图片数据转换为Blob对象
   先写一个工具函数，把image.toDataURL()返回的base64字符串解码成二进制Blob：

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

2. 用Blob创建模拟的File对象
   调用工具函数得到Blob后，构造一个符合文件输入框要求的File对象（可自定义文件名）：

   const croppedDataURL = image.toDataURL();
   const croppedBlob = dataURLtoBlob(croppedDataURL);
   // 自定义文件名，比如裁剪后的图片命名为cropped-image.png
   const croppedFile = new File([croppedBlob], 'cropped-image.png', {type: croppedBlob.type});
   

3. 将File对象赋值给文件输入框
   通过DataTransfer构造FileList，替换输入框的files属性：

   const dataTransfer = new DataTransfer();
   dataTransfer.items.add(croppedFile);
   // 定位到你的文件输入框并赋值
   document.querySelector('input[name="uploadNewImage"]').files = dataTransfer.files;
   

完整整合代码 #

把上述逻辑加到你现有显示图片的代码之后即可：

// 你原有的显示图片代码
$("#" + img_tag_id).attr('src', image.toDataURL());

// 新增的将图片传入文件输入框的逻辑
function dataURLtoBlob(dataURL) {
  const parts = dataURL.split(',');
  const mime = parts[0].match(/:(.*?);/)[1];
  const bstr = atob(parts[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while(n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type: mime});
}

const croppedDataURL = image.toDataURL();
const croppedBlob = dataURLtoBlob(croppedDataURL);
const croppedFile = new File([croppedBlob], 'cropped-image.png', {type: croppedBlob.type});

const dataTransfer = new DataTransfer();
dataTransfer.items.add(croppedFile);
$('input[name="uploadNewImage"]')[0].files = dataTransfer.files;

执行后，文件输入框会显示你自定义的文件名，提交表单时也会将裁剪后的图片作为上传文件发送。该方案兼容Chrome、Firefox、Edge等现代浏览器。

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