目录导航:
前言:
使用技术:
wx.chooseImage() 概述:
wx.uploadFile()概述:
废话不多说,上代码:
.Wxml code:
.Js code:
后端图片接收保存 code(.Net WEBAPI)
效果图展示(美女哟,嘻嘻):
总结:
前言:
业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存。
使用技术:
在这章中将会使用到微信小程序wx.uploadFile(Object object) 和wx.chooseImage(Object object)接口,对图片大小和来源进行上传
wx.chooseImage() 概述:
从本地相册选择图片或使用相机拍照,详细了解请阅读微信小程序开发文档(https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html?search-key=wx.chooseimage)
参数
Object object
wx.uploadFile()概述:
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data,详细了解请阅读微信小程序开发文档(https://developers.weixin.qq.com/miniprogram/dev/api/wx.uploadFile.html?q=wx.uploadFile)。
参数
废话不多说,上代码:
.Wxml code:
-
门店照片(请选择三张)
-
-
-
-
-
-
-
-
-
-
-
-
.Js code:
Page({ /** * 页面的初始数据 */ data: { files: [], //门店图片信息,数组图片保存作为数据源 }, , /** * 多图片上传 */ chooseImage: function(e) { var that = this; if (that.data.files.length > 2) { resource.notishi("抱歉最多只允许上传三张图片哟~"); return false; } -
wx.chooseImage({ count: 3, //默认9张,这里设置三张 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { wx.showLoading({ title: '上传中,请稍等...', }) // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths; //多图片上传,tempFilePaths本地图片地址为一个数组,遍历调用服务器图片上传接口即可实现多图保存 for (var i = 0; i < tempFilePaths.length; i++) { console.log('图片地址名称' + tempFilePaths[i]); wx.uploadFile({ url: app.globalData.hostUrl + "/api/PictureUpload/Upload", //此处为实际接口地址 filePath: tempFilePaths[i], //获取图片路径 header: { 'content-type': 'multipart/form-data' }, name: 'upload', success: function(res) { wx.hideLoading(); let Result = JSON.parse(res.data); console.log(Result);//接收返回来的服务器图片地址 if (Result.code == 1) { let picurl = app.globalData.hostUrl + Result.picurl; console.log(picurl); that.setData({ files: that.data.files.concat(picurl) }); } else { resource.notishi("网络异常,请稍后再试"); } }, fail: function(res) { wx.hideLoading() wx.showToast({ title: '上传失败,请重新上传', icon: 'none', duration: 2000 }) }, }) } } }) }, //图片预览 previewImage: function(e) { wx.previewImage({ current: e.currentTarget.id, // 当前显示图片的http链接 urls: this.data.files // 需要预览的图片http链接列表 })}, })
后端图片接收保存 code(.Net WEBAPI)
/// /// 图片上传保存 /// /// [HttpPost] public IHttpActionResult Upload() { try { var content = Request.Content;//获取http设置的消息和内容 var tempUploadFiles = "/Images/Wechatimages/";//保存路径 var newFileName = ""; string filePath = ""; string extname = ""; string returnurl = ""; var sp = new MultipartMemoryStreamProvider(); Task.Run(async () => await Request.Content.ReadAsMultipartAsync(sp)).Wait(); -
foreach (var item in sp.Contents) { if (item.Headers.ContentDisposition.FileName != null) { var filename = item.Headers.ContentDisposition.FileName.Replace("\"", ""); FileInfo file = new FileInfo(filename); string fileTypes = "gif,jpg,jpeg,png,bmp"; if (Array.IndexOf(fileTypes.Split(','), file.Extension.Substring(1).ToLower()) == -1) { throw new ApplicationException("不支持上传文件类型"); } -
//获取后缀 extname = System.IO.Path.GetExtension(filename);//获取文件的拓展名称 newFileName = Guid.NewGuid().ToString().Substring(0, 6) + extname; string newFilePath = DateTime.Now.ToString("yyyy-MM-dd") + "/"; if (!Directory.Exists(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath)) { Directory.CreateDirectory(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath); } filePath = Path.Combine(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath, newFileName); returnurl = Path.Combine(tempUploadFiles + newFilePath, newFileName);//图片相对路径 var ms = item.ReadAsStreamAsync().Result; using (var br = new BinaryReader(ms)) { var data = br.ReadBytes((int)ms.Length); File.WriteAllBytes(filePath, data);//保存图片 } } } return Json(new {code=1,picurl= returnurl,msg="success" }) ; } catch (Exception ex) { return Json(new { code =0,msg=ex.Message}); } }
总结:
其实做完回过头来想想,无论是微信小程序图片上传还是html页面图片上传原理其实都是差不多,都是通过content-type 为 multipart/form-data 标识,通过http post将图片资源文件以二进制的编码格式传往后台,然后后台获取对应文件流进行数据图片保存。总结的不够到位,有什么没做好的望各位大佬指点。
|