微信小程序> 微信小程序上传图片,webapi后台接收(完全版)

微信小程序上传图片,webapi后台接收(完全版)

浏览量:2319 时间: 来源:前端路上的net

今天花了一天时间,研究了微信小程序的图片上传功能。总体思路为:小程序读取手机相册或者摄像头拍照,然后将图片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");        }

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

小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎