本文转自：http://blog.csdn.net/feter1992/article/details/77877659

前端： 微信开发者工具

后端：.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>

PS：上传到服务器的临时文件夹内，当用户点击保存才把这些文件移动到正式目录下

欢迎加入我的微信小程序技术交流群