如何在微信小程序中實(shí)現(xiàn)圖片上傳功能

如何在微信小程序中實(shí)現(xiàn)圖片上傳功能？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

data: { 
 productInfo: {} 
}, 
//添加Banner 
bindChooiceProduct: function () { 
 var that = this; 
 
 wx.chooseImage({ 
  count: 3, //最多可以選擇的圖片總數(shù) 
  sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有 
  sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有 
  success: function (res) { 
   // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的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); 
      //服務(wù)器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://cache.yisu.com/upload/information/20200622/114/41870.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: '錯(cuò)誤提示', 
       content: '上傳圖片失敗', 
       showCancel: false, 
       success: function (res) { } 
      }) 
     } 
    }); 
   } 
  } 
 }); 
}

后端上傳代碼(將文件上傳到服務(wù)器臨時(shí)文件夾內(nèi))

[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)); 
 
    //獲取臨時(shí)文件相對完整路徑 
    model.Url = System.IO.Path.Combine(relativeUrl, model.Catalog, model.FileName).Replace("\\", "/"); 
  } 
  return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model)); 
}

/// <summary> 
/// 上傳文件 返回?cái)?shù)據(jù)模型 
/// </summary> 
public class UploadFileDTO 
{ 
  /// <summary> 
  /// 目錄名稱 
  /// </summary> 
  public string Catalog { set; get; } 
  /// <summary> 
  /// 文件名稱，包括擴(kuò)展名 
  /// </summary> 
  public string FileName { set; get; } 
  /// <summary> 
  /// 瀏覽路徑 
  /// </summary> 
  public string Url { set; get; } 
  /// <summary> 
  /// 上傳的圖片編號(提供給前端判斷圖片是否全部上傳完) 
  /// </summary> 
  public int ImgIndex { get; set; } 
}

#region 獲取配置文件Key對應(yīng)Value值 
/// <summary> 
/// 獲取配置文件Key對應(yīng)Value值 
/// </summary> 
/// <param name="key"></param> 
/// <returns></returns> 
public static string GetConfigValue(string key) 
{ 
  return ConfigurationManager.AppSettings[key].ToString(); 
} 
#endregion

設(shè)置配置文件上傳文件對應(yīng)的文件夾信息

<appSettings> 
 <!--圖片臨時(shí)文件夾 絕對路徑--> 
 <add key="ImageAbsoluteFolderTemp" value="D:\Images\temp" /> 
 <!--圖片正式文件夾 絕對路徑--> 
 <add key="ImageAbsoluteFolderFinal" value="D:\Images\product" /> 
 
 <!--圖片臨時(shí)文件夾 相對路徑--> 
 <add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/> 
 <!--圖片正式文件夾 相對路徑--> 
 <add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/> 
</appSettings>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。