如何在JavaScript中通过Ajax调用传递Blob值并写入SQL Server数据库？

嘿，我来帮你搞定这个问题！你碰到的Uncaught (in promise) TypeError: Failed to execute 'arrayBuffer' on 'Blob': Illegal invocation错误，本质是因为直接在jQuery Ajax的data里传了Blob对象——jQuery没法直接处理这种二进制类型，得换个方式来传递数据。下面是具体的解决方案：

核心问题原因 #

当你把Blob对象直接放到普通JavaScript对象里作为Ajax的data参数时，jQuery会尝试对这个对象进行序列化处理，这个过程会破坏Blob的原生结构，导致浏览器抛出非法调用的错误。我们需要用FormData来包装所有参数，它是浏览器原生支持的、专门用来处理表单和二进制数据的对象。

修改后的前端代码 #

把你的updateblobdata函数改成下面这样：

function updateblobdata(blobvalue) {
  debugger;
  /// Insert Blob into Database /// 
  console.log('updateblobdata called'); 
  const urlParams = new URLSearchParams(window.location.search); 
  const myParamtag = urlParams.get('104'); 
  const mymodelval = urlParams.get('DuganHosp-0002'); 
  var wonumval = '104'; 
  var tagnumval = 'DuganHosp-0002'; 
  var Modeval = 'U'; 

  // 用FormData包装所有参数，包括Blob
  const formData = new FormData();
  formData.append('WoNum', wonumval);
  formData.append('Tagnum', tagnumval);
  formData.append('BLOB', blobvalue); // 直接添加Blob对象
  formData.append('Mode', Modeval);

  $.ajax({ 
    url: 'TestTool_WebService.asmx/UpdateHtmlBLOBContent', 
    data: formData, // 传递FormData而非普通对象
    method: 'post', 
    dataType: 'json', 
    contentType: false, // 让浏览器自动设置正确的Content-Type
    processData: false, // 禁止jQuery处理数据，避免破坏Blob结构
    cache: false, 
    success: function (data) { 
      console.log('Blob插入成功！', data);
    },
    error: function(xhr, status, error) {
      console.error('插入失败:', error);
    }
  }); 
}

关键配置说明 #

• 用FormData传递数据：FormData能原生支持二进制数据，会自动把Blob转换成服务器可识别的格式，避免jQuery序列化时的错误。
• contentType: false：设置为false后，浏览器会自动添加multipart/form-data类型的请求头，并带上正确的边界符，确保服务器能正确解析FormData里的内容。
• processData: false：禁止jQuery对数据进行序列化处理，防止它把Blob转换成字符串，破坏二进制数据结构。

后端WebService调整建议 #

ASMX WebService对FormData的直接参数绑定支持有限，建议你修改后端方法，通过HttpContext来获取参数和Blob数据：

[WebMethod]
public void UpdateHtmlBLOBContent()
{
    // 从FormData获取普通参数
    string WoNum = HttpContext.Current.Request.Form["WoNum"];
    string Tagnum = HttpContext.Current.Request.Form["Tagnum"];
    string Mode = HttpContext.Current.Request.Form["Mode"];
    
    // 获取Blob并转换成byte[]
    HttpPostedFile blobFile = HttpContext.Current.Request.Files["BLOB"];
    byte[] blobBytes = new byte[blobFile.ContentLength];
    blobFile.InputStream.Read(blobBytes, 0, blobFile.ContentLength);
    
    // 执行数据库插入逻辑，将blobBytes插入到varbinary(max)字段
    // 示例：
    // using (SqlConnection conn = new SqlConnection("你的连接字符串"))
    // {
    //     string sql = "UPDATE 表名 SET BLOB字段 = @BLOB WHERE WoNum = @WoNum AND Tagnum = @Tagnum";
    //     SqlCommand cmd = new SqlCommand(sql, conn);
    //     cmd.Parameters.AddWithValue("@BLOB", blobBytes);
    //     cmd.Parameters.AddWithValue("@WoNum", WoNum);
    //     cmd.Parameters.AddWithValue("@Tagnum", Tagnum);
    //     conn.Open();
    //     cmd.ExecuteNonQuery();
    // }
}

这样修改后，你就能成功把Blob数据插入到SQL Server的varbinary(max)字段里，不会再碰到之前的非法调用错误啦！

内容的提问来源于stack exchange，提问作者S.N. Digbijaya