javascript - 通过ajax发送字节数组

Question

我有一个ajax请求，但它只工作了一半。

function receivedText() {
    alert(fr.result); //Here i have good result
    $.ajax({
        type: "POST",
        url: "/Gallery/UploadImage",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: {
            byteArray: fr.result,
            fileName: $('input[type=file]').val().split('\\').pop()
        },
        success: function (data) {
            if (data == 0)
                alert("error");
            else
                alert("Success");
        },
        error: function () {
            alert("ERROR");
        }
    });
}

这是我的请求。正如你所看到的，我在我的测试(警报)中评论了fr.result有值，但是当我调试并在 Controller 中查看它时，它是 NULL。

这是我的 Controller 。

[HttpPost]
public IActionResult UploadImage(byte[] byteArray, string fileName)
{
    try
    {
        System.IO.File.WriteAllBytes(_hostingEnvironment.WebRootPath + "\\Uploads\\Images\\" + fileName, byteArray);
        return Json(0);
    }
    catch
    {
        return Json(0);
    }
}

Answer 1

您使用 ajax 的方式是错误的。

1. 第一个错误是与Content-Type不匹配

   $.ajax({
       ...
       contentType: "application/json; charset=utf-8",
       ...
       data: {
           byteArray: fr.result,
           fileName: $('input[type=file]').val().split('\\').pop()
       },
       ...
   } 
   

   尽管您已设置 Content-Type=application/json，发送到服务器的有效负载仍将采用 form-url-encoded默认情况下:

   fileName=Xyz&byteArray=
   

   如果您需要 JSON 格式，则应使用 JSON.stringify({...}) 获取文本表示形式。

2. contentType: "application/json; 在这里不合适。那是因为:

   • JSON不是为处理二进制数据而设计的，而是用于文本。您无法使用 json 发送 byte[]。
   • 服务器端代码需要来自查询/路由/表单的简单类型。如果您需要 json，它们应该类似于 IActionResult UploadImage([FromBody] Fr fr)

3. 如果您要发送图像，最简单的方法是使用multipart/form-data的Content-Type 同时在服务器端使用 IFormFile。

   // action method
   public IActionResult UploadImage(IFormFile image, string fileName)
   {
        // ...
   }
   

   现在您可以发送 FormData :

   // your receivedText() function
   function receivedText(){
       var formData = new FormData();
       formData.append('fileName', 'Xyz.img');
   
       // if you need upload image
       var inputFileElement=document.getElementById("inputFileImage");
       formData.append('image', inputFileElement.files[0]);
   
       // of if you're already have a `byte[]`, you could do it as below:
       // var blob = new Blob([bytearray]...); // see https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob
       // formData.append('image', blob); 
   
       $.ajax({
           type: "POST",
           url: "/Gallery/UploadImage",
           contentType: false,
           processData: false,
           data: formData,
           success: function (data) {
               console.log(data);
               // ...
           },
           error: function () {
               // ...
           }
       });
   }