用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 资讯/观点 运营/产品 查看内容

微信小程序开发之多图片上传+服务端接收

Rolan 2019-3-19 10:16

录导航:前言:使用技术:wx.chooseImage() 概述:wx.uploadFile()概述:废话不多说,上代码:.Wxml code:.Js code:后端图片接收保存 code(.Net WEBAPI)效果图展示(美女哟,嘻嘻):总结:回到顶部前言:  业 ...

目录导航:

前言: 
使用技术: 
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:

  1. class='form-s2'>
  2. 门店照片(请选择三张)
  3. class="weui-uploader__files" id="uploaderFiles">
  4. wx:for="{{files}}" wx:key="*this">
  5. class="weui-uploader__file" bindtap="previewImage" id="{{item}}" style='margin-top:11px;'>
  6. class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
  7. class="weui-uploader__input-box" style='top:11px;'>
  8. class="weui-uploader__input" bindtap="chooseImage">

.Js code:

  1. Page({
  2. /**
  3. * 页面的初始数据
  4. */
  5. data:
  6. {
  7. files: [], //门店图片信息,数组图片保存作为数据源
  8. },
  9. ,
  10. /**
  11. * 多图片上传
  12. */
  13. chooseImage: function(e) {
  14. var that = this;
  15. if (that.data.files.length > 2) {
  16. resource.notishi("抱歉最多只允许上传三张图片哟~");
  17. return false;
  18. }
  19. wx.chooseImage({
  20. count: 3, //默认9张,这里设置三张
  21. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  22. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  23. success: function(res) {
  24. wx.showLoading({
  25. title: '上传中,请稍等...',
  26. })
  27. // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  28. var tempFilePaths = res.tempFilePaths;
  29. //多图片上传,tempFilePaths本地图片地址为一个数组,遍历调用服务器图片上传接口即可实现多图保存
  30. for (var i = 0; i < tempFilePaths.length; i++) {
  31. console.log('图片地址名称' + tempFilePaths[i]);
  32. wx.uploadFile({
  33. url: app.globalData.hostUrl + "/api/PictureUpload/Upload", //此处为实际接口地址
  34. filePath: tempFilePaths[i], //获取图片路径
  35. header: {
  36. 'content-type': 'multipart/form-data'
  37. },
  38. name: 'upload',
  39. success: function(res) {
  40. wx.hideLoading();
  41. let Result = JSON.parse(res.data);
  42. console.log(Result);//接收返回来的服务器图片地址
  43. if (Result.code == 1) {
  44. let picurl = app.globalData.hostUrl + Result.picurl;
  45. console.log(picurl);
  46. that.setData({
  47. files: that.data.files.concat(picurl)
  48. });
  49. } else {
  50. resource.notishi("网络异常,请稍后再试");
  51. }
  52. },
  53. fail: function(res) {
  54. wx.hideLoading()
  55. wx.showToast({
  56. title: '上传失败,请重新上传',
  57. icon: 'none',
  58. duration: 2000
  59. })
  60. },
  61. })
  62. }
  63. }
  64. })
  65. },
  66. //图片预览
  67. previewImage: function(e) {
  68. wx.previewImage({
  69. current: e.currentTarget.id, // 当前显示图片的http链接
  70. urls: this.data.files // 需要预览的图片http链接列表
  71. })},
  72. })

后端图片接收保存 code(.Net WEBAPI)

  1. ///
  2. /// 图片上传保存
  3. ///
  4. ///
  5. [HttpPost]
  6. public IHttpActionResult Upload()
  7. {
  8. try
  9. {
  10. var content = Request.Content;//获取http设置的消息和内容
  11. var tempUploadFiles = "/Images/Wechatimages/";//保存路径
  12. var newFileName = "";
  13. string filePath = "";
  14. string extname = "";
  15. string returnurl = "";
  16. var sp = new MultipartMemoryStreamProvider();
  17. Task.Run(async () => await Request.Content.ReadAsMultipartAsync(sp)).Wait();
  18. foreach (var item in sp.Contents)
  19. {
  20. if (item.Headers.ContentDisposition.FileName != null)
  21. {
  22. var filename = item.Headers.ContentDisposition.FileName.Replace("\"", "");
  23. FileInfo file = new FileInfo(filename);
  24. string fileTypes = "gif,jpg,jpeg,png,bmp";
  25. if (Array.IndexOf(fileTypes.Split(','), file.Extension.Substring(1).ToLower()) == -1)
  26. {
  27. throw new ApplicationException("不支持上传文件类型");
  28. }
  29. //获取后缀
  30. extname = System.IO.Path.GetExtension(filename);//获取文件的拓展名称
  31. newFileName = Guid.NewGuid().ToString().Substring(0, 6) + extname;
  32. string newFilePath = DateTime.Now.ToString("yyyy-MM-dd") + "/";
  33. if (!Directory.Exists(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath))
  34. {
  35. Directory.CreateDirectory(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath);
  36. }
  37. filePath = Path.Combine(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath, newFileName);
  38. returnurl = Path.Combine(tempUploadFiles + newFilePath, newFileName);//图片相对路径
  39. var ms = item.ReadAsStreamAsync().Result;
  40. using (var br = new BinaryReader(ms))
  41. {
  42. var data = br.ReadBytes((int)ms.Length);
  43. File.WriteAllBytes(filePath, data);//保存图片
  44. }
  45. }
  46. }
  47. return Json(new {code=1,picurl= returnurl,msg="success" }) ;
  48. }
  49. catch (Exception ex)
  50. {
  51. return Json(new { code =0,msg=ex.Message});
  52. }
  53. }

总结:

  其实做完回过头来想想,无论是微信小程序图片上传还是html页面图片上传原理其实都是差不多,都是通过content-type 为 multipart/form-data 标识,通过http post将图片资源文件以二进制的编码格式传往后台,然后后台获取对应文件流进行数据图片保存。总结的不够到位,有什么没做好的望各位大佬指点。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 追逐时光 来自: cnblogs