使用DropZone上传文件时如何不借助FormData直接发送二进制数据

方案1：自定义DropZone上传逻辑，直接发送二进制 #

不需要修改全局请求逻辑，直接在DropZone的事件回调中覆盖默认的FormData发送逻辑即可：

// 此处myDropzone对应你页面中DropZone容器元素的ID
Dropzone.options.myDropzone = {
  url: "你的服务端上传接口地址",
  method: "post",
  maxFilesize: 10, // 按需配置文件大小限制
  acceptedFiles: "image/*", // 按需配置允许的文件类型
  sending: function(file, xhr, formData) {
    // 终止DropZone默认发起的带FormData的请求
    xhr.abort();
    // 读取文件为二进制格式
    const reader = new FileReader();
    reader.onload = function(e) {
      $.ajax({
        url: this.options.url,
        method: "POST",
        // 直接将二进制作为请求体，不封装FormData
        data: e.target.result,
        // 根据服务端要求设置Content-Type，也可固定为application/octet-stream
        contentType: file.type,
        // 必须关闭jQuery的自动数据处理，避免二进制被转义损坏
        processData: false,
        success: function(res) {
          // 手动触发DropZone回调，保证UI状态正常更新
          file.accepted = true;
          this.emit("success", file, res);
          this.emit("complete", file);
        }.bind(this),
        error: function(xhr, errMsg) {
          this.emit("error", file, errMsg);
          this.emit("complete", file);
        }.bind(this)
      })
    }.bind(this);
    reader.readAsArrayBuffer(file);
    // 阻止默认上传流程继续执行
    return false;
  }
};

该方案的优势是逻辑内聚，只影响当前DropZone组件，不会干扰页面其他请求。

方案2：通过jQuery拦截器全局替换上传请求体 #

如果不想修改DropZone的初始化逻辑，可以通过jQuery的全局请求拦截实现请求体替换：

// 存储当前待上传的文件对象，多文件并发上传可以改用数组存储匹配
let currentUploadFile = null;

// DropZone初始化，仅做文件暂存
Dropzone.options.myDropzone = {
  url: "你的服务端上传接口地址",
  init: function() {
    this.on("sending", function(file, xhr, formData) {
      currentUploadFile = file;
    })
  }
};

// 全局拦截jQuery的AJAX请求
$(document).ajaxSend(function(event, jqXHR, options) {
  // 仅匹配上传接口的POST请求，避免干扰页面其他业务请求
  if (options.url === "你的服务端上传接口地址" && options.type.toUpperCase() === "POST") {
    // 终止原带FormData的请求
    jqXHR.abort();
    // 读取文件二进制重新发起请求
    const reader = new FileReader();
    reader.onload = function(e) {
      $.ajax({
        // 复用原请求的其他配置，如自定义头、超时时间等
        ...options,
        data: e.target.result,
        contentType: currentUploadFile.type,
        processData: false
      })
    }
    reader.readAsArrayBuffer(currentUploadFile);
  }
})

注意：如果需要传递文件名、文件签名等额外参数，直接添加到请求头即可，不需要放入请求体。

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