前端uniapp 后端C# webapi 前端怎么上传图片给后端 后端保存到文件夹里面

在 UniApp 的前端页面上，你可以使用其提供的 Web API 模块通过 JavaScript 进行图片上传。以下是一个简单的步骤：

1. 创建一个文件输入元素 (input[type=file])：

<input type="file" id="imageFileInput" @change="handleImageChange">

2. 定义 `handleImageChange` 函数处理文件选择事件：

methods: {
  handleImageChange(e) {
    let file = e.target.files[0]; // 获取用户选择的第一个文件
    if (!file) return;
    
    this.uploadImage(file); // 调用上传函数
  },
  async uploadImage(file) {
    const formData = new FormData();
    formData.append('image', file);
    
    try {
      await this.$http.post('/api/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}}); // 发送 POST 请求到 C# WebAPI 的 '/api/upload' 接口
      console.log('上传成功');
    } catch (error) {
      console.error('上传失败:', error);
    }
  }
}

这里使用了 UniApp 提供的 `$http` 静态方法发送异步 POST 请求，将文件作为表单数据的一部分上传。

在后端，你需要在 C# WebAPI 中创建接收图片上传的控制器方法。例如，创建一个名为 `ImageController.cs` 的类，并添加一个 `Post` 方法：

using System.IO;
using Microsoft.AspNetCore.Mvc;

namespace YourNamespace.Controllers
{
    [Route("api/[controller]")]
    public class ImageController : ControllerBase
    {
        [HttpPost]
        public IActionResult Upload(IFormFile image)
        {
            if (image == null || !image.FileName.Contains(".jpg") && !image.FileName.Contains(".png")) // 检查文件是否为常见的图片格式
                return BadRequest("只支持.jpg和.png格式的图片");

            var filePath = Path.Combine(Server.MapPath("~/uploads"), image.FileName); // 设置保存路径
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                image.CopyTo(stream);
            }

            return Ok("图片已上传并保存至 " + filePath);
        }
    }
}

这个方法首先检查文件类型，然后将其保存到指定的服务器文件夹（通常是 `~/uploads`）。如果上传成功，返回响应告知前端。