如何为sap.ui.unified.FileUploader设置自定义Blob/BlobURL并替换原文件上传？

嘿，这个问题我之前也踩过坑——浏览器的安全机制限制了我们直接修改<input type="file">的文件内容（毕竟涉及用户本地文件的读写权限），所以没法直接把缩放后的Blob塞进FileUploader替换原始文件。不过我们可以绕开默认提交逻辑，手动处理上传流程，具体看下面的方案：

方案一：手动构造FormData上传（推荐） #

这个方法的核心是阻止FileUploader的默认提交行为，然后用我们自己的Blob构造请求体，通过AJAX发送到后端。步骤很清晰：

1. 阻止默认上传 #

先给你的FileUploader绑定beforeUpload事件，在事件里阻止默认行为：

const oUploader = this.getView().byId("yourFileUploaderId");
// 阻止默认的自动/手动提交
oUploader.attachBeforeUpload((oEvent) => {
  oEvent.preventDefault();
});

2. 构造自定义上传逻辑 #

假设你已经拿到了缩放后的scaledBlob变量，我们可以创建FormData对象，把Blob加进去，再用AJAX发送请求：

function uploadScaledImage() {
  const oUploader = this.getView().byId("yourFileUploaderId");
  const oFormData = new FormData();
  // 获取用户选中的原始文件名，保持后端接收的文件名一致
  const originalFileName = oUploader.getValue().split("\\").pop();
  // 将缩放后的Blob添加到FormData，第三个参数是文件名
  oFormData.append("file", scaledBlob, originalFileName);

  // 用jQuery AJAX发送请求（也可以用UI5的ODataModel API）
  $.ajax({
    url: oUploader.getUploadUrl(), // 复用FileUploader配置的上传地址
    type: "POST",
    data: oFormData,
    processData: false, // 必须设置：禁止jQuery自动处理FormData
    contentType: false, // 必须设置：让浏览器自动生成正确的Content-Type头部
    success: () => {
      sap.m.MessageToast.show("缩放图片上传成功！");
    },
    error: (xhr, status, err) => {
      sap.m.MessageToast.show(`上传失败：${err}`);
    }
  });
}

3. 触发自定义上传 #

你可以给一个自定义按钮绑定点击事件，调用上面的uploadScaledImage函数，或者在图片缩放完成后自动触发。

方案二：替换FileUploader的底层input（不推荐） #

虽然浏览器禁止直接修改input的files，但我们可以创建一个新的File对象（从Blob转换），然后替换底层input的files集合。不过这个方法依赖DOM操作，可能在UI5的版本更新中出现兼容性问题，所以仅作参考：

const oUploader = this.getView().byId("yourFileUploaderId");
const inputElement = oUploader.getFocusDomRef(); // 获取底层的input元素
const originalFileName = oUploader.getValue().split("\\").pop();
// 从Blob创建File对象
const scaledFile = new File([scaledBlob], originalFileName, { type: scaledBlob.type });
// 替换input的files集合
inputElement.files = new FileList([scaledFile]);

⚠️ 注意：这个方法在部分浏览器或者UI5版本中可能失效，因为FileList的构造和修改也受安全限制，所以优先用方案一。

额外注意点 #

• 确保scaledBlob的MIME类型正确（比如image/jpeg、image/png），避免后端解析出错；
• 如果你的后端是OData服务，可以用ODataModel.createStream方法来上传Blob，原理和构造FormData类似；
• 记得关闭FileUploader的autoUpload属性，避免触发默认提交。

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