C# Layui 图片上传带 FromForm 数据格式详解

在C#中使用layui进行图片上传时，可以通过FormData对象将图片文件和其他表单数据一起发送给后端。\n\n首先，你需要在前端创建一个FormData对象，然后将图片文件和其他表单数据添加到该对象中。可以使用JavaScript的FormData.append()方法来添加数据，其中第一个参数为表单字段的名称，第二个参数为字段的值。\n\njavascript\nvar formData = new FormData();\nformData.append('image', file); // file为图片文件\nformData.append('name', name); // name为其他表单字段的值\n\n\n接下来，你可以使用layui的上传组件进行图片上传，并将创建的FormData对象作为参数传递给后端。\n\njavascript\nlayui.use('upload', function(){\n var upload = layui.upload;\n \n //执行实例\n var uploadInst = upload.render({\n elem: '#uploadBtn', //绑定上传按钮\n url: '/upload', //上传接口地址\n data: formData, //传递的数据\n done: function(res){\n //上传成功的回调函数\n console.log(res);\n },\n error: function(){\n //请求异常的回调函数\n }\n });\n});\n\n\n在后端，你可以使用C#的Web API来接收FormData数据。可以在控制器的方法中使用[FromForm]属性将FormData数据绑定到一个自定义模型或动态对象中。\n\ncsharp\n[HttpPost]\npublic ActionResult UploadImage([FromForm] FormDataModel data)\n{\n //使用data对象获取图片文件和其他表单数据\n var image = data.Image;\n var name = data.Name;\n \n //处理上传的图片和其他表单数据\n //...\n \n return Ok();\n}\n\n\n其中，FormDataModel是一个自定义模型，用于接收FormData数据。\n\ncsharp\npublic class FormDataModel\n{\n public IFormFile Image { get; set; } // 图片文件字段\n public string Name { get; set; } // 其他表单字段\n}\n\n\n通过以上步骤，你就可以在C#中使用layui进行图片上传，并同时将其他表单数据一起发送给后端。