微信小程序上传图片，web api后台接收（完全版）

插播一条广告：软件设计师考试系统：

本人自己开发的网址：

http://94.191.14.138:8025/Html/Customer/Main.html#/Index

今天花了一天时间，研究了微信小程序的图片上传功能。总体思路为：小程序读取手机相册或者摄像头拍照，然后将图片post到web api。api接收图片信息，存到硬盘，然后将路径存储在数据库中。

问题：1、首先要解决跨域问题，这个在mvc5的web api的默认配置中修改即可。

          2、post提交问题，在这里我遇到了大坑，往上研究了一大圈，各种五谷杂粮的代码，基本上都是浪费流量。我的解决方案一会发出。

解决了上面两个问题，直接上代码：

wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://。。。。/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData:{
        'user': 'test'
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

使用上面的代码就可以完成图片的上传，url修改为你的api地址。

然后是web api的代码，奉献核心代码：

 public IHttpActionResult Post()
        {
            HttpFileCollection files = HttpContext.Current.Request.Files;

            foreach (string key in files.AllKeys)
            {
                HttpPostedFile file = files[key];//file.ContentLength文件长度
                if (string.IsNullOrEmpty(file.FileName) == false)
                    file.SaveAs(HttpContext.Current.Server.MapPath("~/imgcoll/") + file.FileName);
            }

            return Ok("success2");
        }

好了，这是我花了一天总结的，看起来很简单，实际上真的很费功夫，希望和我一样被困扰的同仁能够顺利的完成。

更新于2023年6月29日

上面的接收方式是.net framework的，现在我们都用.net core\net5\6\7;接收方式也改变了，如下：

        [HttpPost]
        public CommonResult AcceptFincialImage()
        {
            var files = HttpContext.Request.Form.Files;
            string fileFold = _bll.AccessInageFold();
            foreach (var item in files)
            {
                fileFold += item.FileName;
                using (var stream = System.IO.File.Create(fileFold))
                {
                    item.CopyToAsync(stream);
                } 
            }
            return new CommonResult();
        }

如有不了解，可以加我微信：1057359832