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

前些日子接了个任务就是开发一个小程序，遇到了一个问题就是需要图片上传至服务器并保存记录，遵循着解决思路我们先从最开始入手
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来调试啦~

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

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

微信图片自动上传到服务器,微信小程序怎样使图片上传至服务器
这次给大家带来微信小程序怎样使图片上传至服务器,微信小程序使图片上传至服务器的注意事项有哪些,下面就是实战案例,一起来看一下.-wxml 发布项目 /**选择图片 */ choose: functio ...
微信小程序开发(二)图片上传
更新2017-08-24 更新七牛SDK只最新7.0.5版本. 在之前的博客<Node.js+express+MySQL使用七牛云实现的用户头像修改>,已经实现了在MUI框架或者< ...
微信小程序开发之图片上传+Java服务端接收
闲言少叙直入正题前端代码在网上一搜一大堆,且搜出来的结果基本上是正确的,没啥好说的,我连代码都不想贴(如果有时间的话明天整理下贴在文章结尾,没时间的话就不贴了).但是,但是,但是,靠谱的,不用改动就 ...
微信小程序云开发图片上传完整代码附效果图
在app.json里面加如下代码, 使用 WeUI组件库.点击跳转 "useExtendedLib": {"weui": true}, 先看效果图 wxml & ...
微信小程序用户头像编辑上传
微信小程序用户头像编辑上传近期接触了一个小程序项目,需要可以修改用户头像,默认获取用户当前微信头像,点击头像,可调用手机照相机或者本地相册,更换图片. html代码如下: js代码:
微信小程序开发之文件上传下载应用场景（附Demo源码）
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
微信小程序云开发-批量上传文件到云储存空间
微信小程序开发自己最近在玩微信小程序,准备记录一些自己遇到的,网络上没有对应教程(也许是自己没找到),或者是教程比较少的问题,然后给出自己的解决方案目录微信小程序开发问题一.云储存是什么? ...
微信小程序云开发实现上传文件和预览下载文件
微信小程序云开发实现上传文件和预览下载文件一.前言目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...
微信小程序+SpringBoot实现文件上传与下载
微信小程序+SpringBoot实现文件上传与下载 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 1.1.2 设置上传文件大小限制 1.1 ...

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

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

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

最新文章

热门文章