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

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": "/file/tupian/20230213/404.html" } 
      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)); 
}

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

#region 獲取配置文件Key對應Value值 
/// 
 
/// 獲取配置文件Key對應Value值 
/// 
 
///  
///  
public static string GetConfigValue(string key) 
{ 
  return ConfigurationManager.AppSettings[key].ToString(); 
} 
#endregion

設置配置文件上傳文件對應的文件夾信息

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創新互聯行業資訊頻道，感謝您對創新互聯的支持。