怎么把微信片变成文件发送到微信小程序里,小程序上传片到服务器

微信小程序如何把图片上传至服务器

前些日子接了个任务就是开发一个小程序，遇到了一个问题就是需要图片上传至服务器并保存记录，遵循着解决思路我们先从最开始入手
1：微信上传接口
2：服务器接收接口
3：保存过程
4：小程序上传图片所需条件

上传图片的接口微信官方文档是清楚说明的，详细了解：
wx.uploadfile上传图片
但是呢，有的同志就会说了，上传图片我也不清楚啊，怎么办去这里
wx.chooseImage图片
(建议先去看看官方的文档，我会在下面贴出我的源码，这样理解能更清晰，可以cv但是要理解!)
好，目前微信这块的文档和接口齐了，下面我们准备.net接口来接收图片并如何保存本地
我们选择.net frameworf 4.6.2的Web API来接收，排除令牌和加密进行最简单的完善。

下面是代码实现接收并保存：

/// <summary> /// 图片上传保存 /// </summary> /// <returns></returns> [HttpPost] public string Save() { //图片存储路径 string path = AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "UploadFile/"; //用户提交的数据 var Data = System.Web.HttpContext.Current.Request.Form; string filesrc = string.Empty; string src = string.Empty; string FileName = ""; //获取上传的文件 var httpPostedFile = HttpContext.Current.Request.Files; if (httpPostedFile != null && httpPostedFile.Count > 0) { var file = httpPostedFile[0]; string imgType = Path.GetExtension(file.FileName); //限制文件上传类型 if (imgType.Contains(".jpg") || imgType.Contains(".png") || imgType.Contains(".bmp")) { FileName = Guid.NewGuid().ToString() + imgType; filesrc = path + FileName; src = "/UploadFile/" + FileName;//部署路径下的文件夹 file.SaveAs(filesrc);///保存完毕 } } return "保存成功"; }

这样我们的后台接口现在已经把基本的功能准备好了，我们去前端小程序再看看怎么写

wx.chooseImage({ sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths; console.log("数组：" + tempFilePaths); var imgs = that.data.imgs; // console.log(tempFilePaths + '----'); for (var i = 0; i < tempFilePaths.length; i++) { if (imgs.length >= 9) { that.setData({ imgs: imgs }); return false; } else { imgs.push(tempFilePaths[i]); } } wx.uploadFile({ url: '部署API的请求地址', filePath: tempFilePaths[0], name: "file", header: { "Content-Type": "multipart/form-data" }, formData: { "user": "test", }, success: function (res) { console.log(res.data + "结果") } }) } });

思路：调用chooseimage接口后，我们得到了图片在小程序中得了临时路径，我们要用用户选择的临时路径来找到图片，调用uploadfile接口，并通过header且以二进制流的形式作为参数传递给我们的后台api接收图片，formdata内可以写其他参数，filepath为必填，填入图片路径，具体细节，上方代码块有一定注释，配合官方文档情境了解，我相信你很快就会理解。
Ps:我是把图片放在一个数组里，直接用字符串保存也可以，但是数组可以保存多个，后期需求用户选择多张图片就可以用到,其中有些变量可能有的同志看的比较笼统在js文件中的data中定义即可

注意：调用uploadfile接口需要域名的条件如下：

域名合法，（解析映射）https,(买证书)不能为本地调试路径地址（必须为外网已搭建）

有的同志暂时没有Https在开发环境，开发软件-右上角详情-本地设置：

把这个勾选上，开发的时候就可以用http来调试啦~

有错误的地方请大神积极指正，必认真学习更改！
大家加油！