前端: 微信开发者工具
后端:.Net
服务器:阿里云
这里介绍微信小程序如何实现上传图片到自己的服务器上
前端代码
1 data: { 2 productInfo: {} 3 }, 4 //添加Banner 5 bindChooiceProduct: function () { 6 var that = this; 7 8 wx.chooseImage({ 9 count: 3, //最多可以选择的图片总数 10 sizeType: [‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有 11 sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有 12 success: function (res) { 13 // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 14 var tempFilePaths = res.tempFilePaths; 15 //启动上传等待中... 16 wx.showToast({ 17 title: ‘正在上传...‘, 18 icon: ‘loading‘, 19 mask: true, 20 duration: 10000 21 }) 22 var uploadImgCount = 0; 23 for (var i = 0, h = tempFilePaths.length; i < h; i++) { 24 wx.uploadFile({ 25 url: util.getClientSetting().domainName + ‘/home/uploadfilenew‘, 26 filePath: tempFilePaths[i], 27 name: ‘uploadfile_ant‘, 28 formData: { 29 ‘imgIndex‘: i 30 }, 31 header: { 32 "Content-Type": "multipart/form-data" 33 }, 34 success: function (res) { 35 uploadImgCount++; 36 var data = JSON.parse(res.data); 37 //服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" } 38 var productInfo = that.data.productInfo; 39 if (productInfo.bannerInfo == null) { 40 productInfo.bannerInfo = []; 41 } 42 productInfo.bannerInfo.push({ 43 "catalog": data.Catalog, 44 "fileName": data.FileName, 45 "url": data.Url 46 }); 47 that.setData({ 48 productInfo: productInfo 49 }); 50 51 //如果是最后一张,则隐藏等待中 52 if (uploadImgCount == tempFilePaths.length) { 53 wx.hideToast(); 54 } 55 }, 56 fail: function (res) { 57 wx.hideToast(); 58 wx.showModal({ 59 title: ‘错误提示‘, 60 content: ‘上传图片失败‘, 61 showCancel: false, 62 success: function (res) { } 63 }) 64 } 65 }); 66 } 67 } 68 }); 69 }
后端上传代码(将文件上传到服务器临时文件夹内)
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 //获取文件后缀 13 string extensionName = System.IO.Path.GetExtension(file.FileName); 14 15 //文件名 16 model.FileName = System.Guid.NewGuid().ToString("N") + extensionName; 17 18 //保存文件路径 19 string filePathName = System.IO.Path.Combine(CommonHelper.GetConfigValue("ImageAbsoluteFolderTemp"), model.Catalog); 20 if (!System.IO.Directory.Exists(filePathName)) 21 { 22 System.IO.Directory.CreateDirectory(filePathName); 23 } 24 //相对路径 25 string relativeUrl = CommonHelper.GetConfigValue("ImageRelativeFolderTemp"); 26 file.SaveAs(System.IO.Path.Combine(filePathName, model.FileName)); 27 28 //获取临时文件相对完整路径 29 model.Url = System.IO.Path.Combine(relativeUrl, model.Catalog, model.FileName).Replace("\\", "/"); 30 } 31 return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model)); 32 }
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 <!--图片临时文件夹 相对路径--> 8 <add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/> 9 <!--图片正式文件夹 相对路径--> 10 <add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/> 11 </appSettings>