微信小程序--实现图片上传

前端：微信开发者工具

后端：.Net

服务器：阿里云

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

前端代码

 data: {

   productInfo: {}

 },

 //添加Banner

 bindChooiceProduct: function () {

   var that = this;

   wx.chooseImage({

     count: 3,  //最多可以选择的图片总数

     sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有

     sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

     success: function (res) {

       // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

       var tempFilePaths = res.tempFilePaths;

       //启动上传等待中...

       wx.showToast({

         title: '正在上传...',

         icon: 'loading',

         mask: true,

         duration: 10000

       })

       var uploadImgCount = 0;

       for (var i = 0, h = tempFilePaths.length; i < h; i++) {

         wx.uploadFile({

           url: util.getClientSetting().domainName + '/home/uploadfilenew',

           filePath: tempFilePaths[i],

           name: 'uploadfile_ant',

           formData: {

             'imgIndex': i

           },

           header: {

             "Content-Type": "multipart/form-data"

           },

           success: function (res) {

             uploadImgCount++;

             var data = JSON.parse(res.data);

             //服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }

             var productInfo = that.data.productInfo;

             if (productInfo.bannerInfo == null) {

               productInfo.bannerInfo = [];

             }

             productInfo.bannerInfo.push({

               "catalog": data.Catalog,

               "fileName": data.FileName,

               "url": data.Url

             });

             that.setData({

               productInfo: productInfo

             });

             //如果是最后一张,则隐藏等待中

             if (uploadImgCount == tempFilePaths.length) {

               wx.hideToast();

             }

           },

           fail: function (res) {

             wx.hideToast();

             wx.showModal({

               title: '错误提示',

               content: '上传图片失败',

               showCancel: false,

               success: function (res) { }

             })

           }

         });

       }

     }

   });

 }

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

 [HttpPost]

 public ContentResult UploadFileNew()

 {

     UploadFileDTO model = new UploadFileDTO();

     HttpPostedFileBase file = Request.Files["uploadfile_ant"];

     if (file != null)

     {

         //公司编号+上传日期文件主目录

         model.Catalog = DateTime.Now.ToString("yyyyMMdd");

         model.ImgIndex = Convert.ToInt32(Request.Form["imgIndex"]);

         //获取文件后缀

         string extensionName = System.IO.Path.GetExtension(file.FileName);

         //文件名

         model.FileName = System.Guid.NewGuid().ToString("N") + extensionName;

         //保存文件路径

         string filePathName = System.IO.Path.Combine(CommonHelper.GetConfigValue("ImageAbsoluteFolderTemp"), model.Catalog);

         if (!System.IO.Directory.Exists(filePathName))

         {

             System.IO.Directory.CreateDirectory(filePathName);

         }

         //相对路径

         string relativeUrl = CommonHelper.GetConfigValue("ImageRelativeFolderTemp");

         file.SaveAs(System.IO.Path.Combine(filePathName, model.FileName));

         //获取临时文件相对完整路径

         model.Url = System.IO.Path.Combine(relativeUrl, model.Catalog, model.FileName).Replace("\\", "/");

     }

     return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model));

 }

 /// <summary>

 /// 上传文件 返回数据模型

 /// </summary>

 public class UploadFileDTO

 {

     /// <summary>

     /// 目录名称

     /// </summary>

     public string Catalog { set; get; }

     /// <summary>

     /// 文件名称，包括扩展名

     /// </summary>

     public string FileName { set; get; }

     /// <summary>

     /// 浏览路径

     /// </summary>

     public string Url { set; get; }

     /// <summary>

     /// 上传的图片编号(提供给前端判断图片是否全部上传完)

     /// </summary>

     public int ImgIndex { get; set; }

 }

 #region 获取配置文件Key对应Value值

 /// <summary>

 /// 获取配置文件Key对应Value值

 /// </summary>

 /// <param name="key"></param>

 /// <returns></returns>

 public static string GetConfigValue(string key)

 {

     return ConfigurationManager.AppSettings[key].ToString();

 }

 #endregion

设置配置文件上传文件对应的文件夹信息

 <appSettings>

   <!--图片临时文件夹 绝对路径-->

   <add key="ImageAbsoluteFolderTemp" value="D:\Images\temp" />

   <!--图片正式文件夹 绝对路径-->

   <add key="ImageAbsoluteFolderFinal" value="D:\Images\product" />

   <!--图片临时文件夹 相对路径-->

   <add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/>

   <!--图片正式文件夹 相对路径-->

   <add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/>

 </appSettings>

巴特西

微信小程序--实现图片上传

最新文章

热门文章