如何将文件图像转换为 Byte[] ReactJS？

Question

我想将图像发送到 api 终点和终点接受字节[] 我该如何处理。我的代码是：单击上传按钮时的 ReactJS 函数：

    let onClickHandler = () => {
        let data = new FormData()
        data.append('file', image);

        axios.post("/Contact/ContactForm/",  {
            
            AttachedImage: data

        }, {
            
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'X-Requested-With': 'XMLHttpRequest',
                }
            // receive two parameter endpoint url ,form data
        })
            .then(res => { // then print response status
                console.log('binary Response......',res.statusText)
            });
}

和我的端点控制器方法：

[HttpPost]
        public async Task<IActionResult> ContactForm([FromBody] Contact model)
        {
            try
            {
                model.CreationDate = DateTime.Now;
                await _contact.ContactForm(model);
                return Ok("Submitted Successfully");
            }
            catch (Exception ex) { return this.BadRequest("Not Submitted Successfully" + ex.ToString()); }
        }

最后 Model.cs Class

public byte[] AttachedImage { set; get; }

Answer 1

很难知道 API 是否会接受它，但您可以将文件转换为 Uint8Array，这是一个数组，文件的所有字节都表示为整数。

let file: File = ...
let uint8 = new Uint8Array(await file.arrayBuffer())

Answer 2

want to send image to api end point and end point accept byte[] how can i handle this.

请注意 the default model binder 无法处理将设置为 null 的字节数组。

要上传图像文件并将数据绑定到模型 class 的字节数组属性，您可以尝试以下解决方案：

方案一 - 将选中的图片文件转成base64编码的字符串，然后用一个ByteArrayModelBinder转成字节数组

public class Contact
{
    [ModelBinder(BinderType = typeof(ByteArrayModelBinder))]
    public byte[] AttachedImage { set; get; }
    public DateTime CreationDate { set; get; }

    //...
    //other properties
    //...
 }

测试数据

{
    "attachedImage": "iVBORw0KGgoAAAANSUhEUgAAAMsAAA.....",
    "creationDate": "2021-08-21T15:12:05"
}

检测结果

解决方案 2 - 实施并使用如下所示的自定义模型绑定器将选定的图像文件绑定到字节数组。

public class ImageToByteArrayModelBinder : IModelBinder
{
    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        if (bindingContext == null)
        {
            throw new ArgumentNullException(nameof(bindingContext));
        }

        // ...
        // implement it based on your actual requirement
        // code logic here
        // ...



        if (bindingContext.ActionContext.HttpContext.Request.Form.Files["AttachedImage"]?.Length > 0)
        {
            var fileBytes = new byte[bindingContext.ActionContext.HttpContext.Request.Form.Files["AttachedImage"].Length];

            using (var ms = new MemoryStream())
            {
                bindingContext.ActionContext.HttpContext.Request.Form.Files["AttachedImage"].CopyTo(ms);
                fileBytes = ms.ToArray();
            }

            bindingContext.Result = ModelBindingResult.Success(fileBytes);
        }



        return Task.CompletedTask;
    }
}

检测结果

如何将文件图像转换为 Byte[] ReactJS？

How to Convert File Image to Byte[] ReactJS?

javascript

binaryfiles

reactjs

axios

asp.net-core-webapi