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

本文实例为大家分享了微信小程序实现图片上传功能的具体代码，供大家参考，具体内容如下

前端：微信开发者工具

后端：.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：上传到服务器的临时文件夹内，当用户点击保存才把这些文件移动到正式目录下。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。