请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

jeesite

 找回密码
 注册新会员
查看: 264|回复: 3

原 微信小程序实现图片上传功能

[复制链接]
姚海陆 发表于 2018-7-2 17:30:19 | 显示全部楼层 |阅读模式
https://blog.csdn.net/feter1992/article/details/77877659

前端: 微信开发者工具
https://blog.csdn.net/feter1992/article/details/77877659
后端:.Net

服务器:阿里云

这里介绍微信小程序如何实现上传图片到自己的服务器上

前端代码

  1. data: {
  2.   productInfo: {}
  3. },
  4. //添加Banner
  5. bindChooiceProduct: function () {
  6.   var that = this;

  7.   wx.chooseImage({
  8.     count: 3,  //最多可以选择的图片总数
  9.     sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
  10.     sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  11.     success: function (res) {
  12.       // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  13.       var tempFilePaths = res.tempFilePaths;
  14.       //启动上传等待中...
  15.       wx.showToast({
  16.         title: '正在上传...',
  17.         icon: 'loading',
  18.         mask: true,
  19.         duration: 10000
  20.       })
  21.       var uploadImgCount = 0;
  22.       for (var i = 0, h = tempFilePaths.length; i < h; i++) {
  23.         wx.uploadFile({
  24.           url: util.getClientSetting().domainName + '/home/uploadfilenew',
  25.           filePath: tempFilePaths[i],
  26.           name: 'uploadfile_ant',
  27.           formData: {
  28.             'imgIndex': i
  29.           },
  30.           header: {
  31.             "Content-Type": "multipart/form-data"
  32.           },
  33.           success: function (res) {
  34.             uploadImgCount++;
  35.             var data = JSON.parse(res.data);
  36.             //服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
  37.             var productInfo = that.data.productInfo;
  38.             if (productInfo.bannerInfo == null) {
  39.               productInfo.bannerInfo = [];
  40.             }
  41.             productInfo.bannerInfo.push({
  42.               "catalog": data.Catalog,
  43.               "fileName": data.FileName,
  44.               "url": data.Url
  45.             });
  46.             that.setData({
  47.               productInfo: productInfo
  48.             });

  49.             //如果是最后一张,则隐藏等待中
  50.             if (uploadImgCount == tempFilePaths.length) {
  51.               wx.hideToast();
  52.             }
  53.           },
  54.           fail: function (res) {
  55.             wx.hideToast();
  56.             wx.showModal({
  57.               title: '错误提示',
  58.               content: '上传图片失败',
  59.               showCancel: false,
  60.               success: function (res) { }
  61.             })
  62.           }
  63.         });
  64.       }
  65.     }
  66.   });
  67. }
复制代码



后端上传代码(将文件上传到服务器临时文件夹内)

  1. [HttpPost]
  2. public ContentResult UploadFileNew()
  3. {
  4.     UploadFileDTO model = new UploadFileDTO();
  5.     HttpPostedFileBase file = Request.Files["uploadfile_ant"];
  6.     if (file != null)
  7.     {
  8.         //公司编号+上传日期文件主目录
  9.         model.Catalog = DateTime.Now.ToString("yyyyMMdd");
  10.         model.ImgIndex = Convert.ToInt32(Request.Form["imgIndex"]);

  11.         //获取文件后缀
  12.         string extensionName = System.IO.Path.GetExtension(file.FileName);

  13.         //文件名
  14.         model.FileName = System.Guid.NewGuid().ToString("N") + extensionName;

  15.         //保存文件路径
  16.         string filePathName = System.IO.Path.Combine(CommonHelper.GetConfigValue("ImageAbsoluteFolderTemp"), model.Catalog);
  17.         if (!System.IO.Directory.Exists(filePathName))
  18.         {
  19.             System.IO.Directory.CreateDirectory(filePathName);
  20.         }
  21.         //相对路径
  22.         string relativeUrl = CommonHelper.GetConfigValue("ImageRelativeFolderTemp");
  23.         file.SaveAs(System.IO.Path.Combine(filePathName, model.FileName));

  24.         //获取临时文件相对完整路径
  25.         model.Url = System.IO.Path.Combine(relativeUrl, model.Catalog, model.FileName).Replace("\\", "/");
  26.     }
  27.     return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model));
  28. }
复制代码


  1. /// <summary>
  2. /// 上传文件 返回数据模型
  3. /// </summary>
  4. public class UploadFileDTO
  5. {
  6.     /// <summary>
  7.     /// 目录名称
  8.     /// </summary>
  9.     public string Catalog { set; get; }
  10.     /// <summary>
  11.     /// 文件名称,包括扩展名
  12.     /// </summary>
  13.     public string FileName { set; get; }
  14.     /// <summary>
  15.     /// 浏览路径
  16.     /// </summary>
  17.     public string Url { set; get; }
  18.     /// <summary>
  19.     /// 上传的图片编号(提供给前端判断图片是否全部上传完)
  20.     /// </summary>
  21.     public int ImgIndex { get; set; }
  22. }
复制代码


  1. #region 获取配置文件Key对应Value值
  2. /// <summary>
  3. /// 获取配置文件Key对应Value值
  4. /// </summary>
  5. /// <param name="key"></param>
  6. /// <returns></returns>
  7. public static string GetConfigValue(string key)
  8. {
  9.     return ConfigurationManager.AppSettings[key].ToString();
  10. }
  11. #endregion
复制代码


  1. <appSettings>
  2.   <!--图片临时文件夹 绝对路径-->
  3.   <add key="ImageAbsoluteFolderTemp" value="D:\Images\temp" />
  4.   <!--图片正式文件夹 绝对路径-->
  5.   <add key="ImageAbsoluteFolderFinal" value="D:\Images\product" />

  6.   <!--图片临时文件夹 相对路径-->
  7.   <add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/>
  8.   <!--图片正式文件夹 相对路径-->
  9.   <add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/>
  10. </appSettings>
复制代码
PS:上传到服务器的临时文件夹内,当用户点击保存才把这些文件移动到正式目录下
回复

使用道具 举报

admin 发表于 2018-7-2 18:50:53 | 显示全部楼层
  1. // pages/communicateQuestion/communicateQuestion.js




  2. Page({
  3.   onLoad: function (options) {
  4.     var that = this;
  5.     var app = getApp();
  6.     var imgServer = app.globalData.imgServer;
  7.     that.setData({
  8.       'imgServer': imgServer,
  9.     });
  10.   },

  11.   uploadMessageImage: function () {

  12.     var that = this;
  13.     wx.chooseImage({
  14.       count: 1,  //最多可以选择的图片总数
  15.       sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
  16.       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  17.       success: function (res) {

  18.         console.log("res:"+JSON.stringify(res));
  19.         // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  20.         var tempFilePaths = res.tempFilePaths;
  21.         //启动上传等待中...
  22.         wx.showToast({
  23.           title: '正在上传...',
  24.           icon: 'loading',
  25.           mask: true,
  26.           duration: 10000
  27.         });
  28.         var uploadImgCount = 0;
  29.         for (var i = 0, h = tempFilePaths.length; i < h; i++) {
  30.           wx.uploadFile({

  31.             url: 'http://weixin.yunlaiguoji.com:8080/jeesite2.0/wechat/media/upload',
  32.             filePath: tempFilePaths[i],
  33.             name: 'uploadfile_ant',
  34.             formData: {
  35.               'imgIndex': i
  36.             },
  37.             header: {
  38.               "Content-Type": "multipart/form-data"
  39.             },
  40.             success: function (res) {
  41.               uploadImgCount++;
  42.               var data = JSON.parse(res.data);
  43.               var productInfo = that.data.productInfo;
  44.               if (productInfo.bannerInfo == null) {
  45.                 productInfo.bannerInfo = [];
  46.               }
  47.               productInfo.bannerInfo.push({
  48.                 "catalog": data.Catalog,
  49.                 "fileName": data.FileName,
  50.                 "url": data.Url
  51.               });
  52.               that.setData({
  53.                 productInfo: productInfo
  54.               });

  55.               //如果是最后一张,则隐藏等待中
  56.               if (uploadImgCount == tempFilePaths.length) {
  57.                 wx.hideToast();
  58.               }
  59.             },
  60.             fail: function (res) {
  61.               wx.hideToast();
  62.               wx.showModal({
  63.                 title: '错误提示',
  64.                 content: '上传图片失败',
  65.                 showCancel: false,
  66.                 success: function (res) { }
  67.               })
  68.             }
  69.           });
  70.         }
  71.       }
  72.     });

  73.    



  74.   }

  75. })

复制代码
回复 支持 反对

使用道具 举报

admin 发表于 2018-7-2 19:12:43 | 显示全部楼层
  1. // pages/communicateQuestion/communicateQuestion.js




  2. Page({
  3.   onLoad: function (options) {
  4.     var that = this;
  5.     var app = getApp();
  6.     var imgServer = app.globalData.imgServer;
  7.     that.setData({
  8.       'imgServer': imgServer,
  9.     });
  10.   },

  11.   uploadMessageImage: function () {

  12.     var that = this;
  13.     wx.chooseImage({
  14.       count: 1,  //最多可以选择的图片总数
  15.       sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
  16.       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  17.       success: function (res) {

  18.         console.log("res:"+JSON.stringify(res));
  19.         // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  20.         var tempFilePaths = res.tempFilePaths;
  21.         //启动上传等待中...
  22.         wx.showToast({
  23.           title: '正在上传...',
  24.           icon: 'loading',
  25.           mask: true,
  26.           duration: 10000
  27.         });
  28.         var uploadImgCount = 0;
  29.         for (var i = 0, h = tempFilePaths.length; i < h; i++) {
  30.           wx.uploadFile({

  31.             url: 'http://weixin.yunlaiguoji.com:8080/jeesite2.0/f/wechat/media/upload',
  32.             filePath: tempFilePaths[i],
  33.             name: 'uploadfile_ant',
  34.             formData: {
  35.               'imgIndex': i
  36.             },
  37.             header: {
  38.               "Content-Type": "multipart/form-data"
  39.             },
  40.             success: function (res) {
  41.               uploadImgCount++;
  42.               console.log("res:" + res);
  43.             
  44.               console.log("res:" + JSON.stringify(res));
  45.               //如果是最后一张,则隐藏等待中
  46.               if (uploadImgCount == tempFilePaths.length) {
  47.                 wx.hideToast();
  48.               }
  49.             },
  50.             fail: function (res) {
  51.               wx.hideToast();
  52.               wx.showModal({
  53.                 title: '错误提示',
  54.                 content: '上传图片失败',
  55.                 showCancel: false,
  56.                 success: function (res) { }
  57.               })
  58.             }
  59.           });
  60.         }
  61.       }
  62.     });

  63.    



  64.   }

  65. })

复制代码
回复 支持 反对

使用道具 举报

admin 发表于 2018-7-2 19:48:10 | 显示全部楼层
  1. // pages/communicateQuestion/communicateQuestion.js




  2. Page({
  3.   onLoad: function (options) {
  4.     var that = this;
  5.     var app = getApp();
  6.     var __sid = app.globalData.userInfo;
  7.     var serverUrl = app.globalData.serverUrl;
  8.     var imgServer = app.globalData.imgServer;
  9.     that.setData({
  10.       'imgServer': imgServer,
  11.       '__sid': __sid, 'serverUrl': serverUrl,
  12.     });
  13.   },

  14.   uploadMessageImage: function () {

  15.     var that = this;
  16.     wx.chooseImage({
  17.       count: 1,  //最多可以选择的图片总数
  18.       sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
  19.       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  20.       success: function (res) {

  21.         console.log("res:"+JSON.stringify(res));
  22.         // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  23.         var tempFilePaths = res.tempFilePaths;
  24.         //启动上传等待中...
  25.         wx.showToast({
  26.           title: '正在上传...',
  27.           icon: 'loading',
  28.           mask: true,
  29.           duration: 10000
  30.         });
  31.         var uploadImgCount = 0;
  32.         for (var i = 0, h = tempFilePaths.length; i < h; i++) {
  33.           wx.uploadFile({

  34.             url: that.data.serverUrl+'/jeesiste2.0/f/wechat/media/upload',
  35.             filePath: tempFilePaths[i],
  36.             name: 'uploadfile_ant',
  37.             __sid: that.data.__sid,
  38.             formData: {
  39.               'imgIndex': i
  40.             },
  41.             header: {
  42.               "Content-Type": "multipart/form-data"
  43.             },
  44.             success: function (res) {
  45.               uploadImgCount++;
  46.               console.log("res:" + res);
  47.             
  48.               console.log("res:" + JSON.stringify(res));
  49.               //如果是最后一张,则隐藏等待中
  50.               if (uploadImgCount == tempFilePaths.length) {
  51.                 wx.hideToast();
  52.               }
  53.             },
  54.             fail: function (res) {
  55.               wx.hideToast();
  56.               wx.showModal({
  57.                 title: '错误提示',
  58.                 content: '上传图片失败',
  59.                 showCancel: false,
  60.                 success: function (res) { }
  61.               })
  62.             }
  63.           });
  64.         }
  65.       }
  66.     });

  67.    



  68.   }

  69. })

复制代码
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册新会员

本版积分规则

QQ|手机版|小黑屋|Archiver|jeesite 官方论坛. ( 吉ICP备12004769号  

GMT+8, 2018-11-17 10:39 , Processed in 0.147461 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表