微信小程序?qū)崿F(xiàn)圖片上傳功能

更新時(shí)間：2018年05月28日 14:45:28 作者：行俠者

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)圖片上傳功能的具體代碼，供大家參考，具體內(nèi)容如下

前端：微信開發(fā)者工具

后端：.Net

服務(wù)器：阿里云

這里介紹微信小程序如何實(shí)現(xiàn)上傳圖片到自己的服務(wù)器上

前端代碼

data: { 
 productInfo: {} 
}, 
//添加Banner 
bindChooiceProduct: function () { 
 var that = this; 
 
 wx.chooseImage({ 
  count: 3, //最多可以選擇的圖片總數(shù) 
  sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有 
  sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有 
  success: function (res) { 
   // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 
   var tempFilePaths = res.tempFilePaths; 
   //啟動(dòng)上傳等待中... 
   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://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: '錯(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) 
  { 
    //公司編號(hào)+上傳日期文件主目錄 
    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); 
    } 
    //相對(duì)路徑 
    string relativeUrl = CommonHelper.GetConfigValue("ImageRelativeFolderTemp"); 
    file.SaveAs(System.IO.Path.Combine(filePathName, model.FileName)); 
 
    //獲取臨時(shí)文件相對(duì)完整路徑 
    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> 
  /// 上傳的圖片編號(hào)(提供給前端判斷圖片是否全部上傳完) 
  /// </summary> 
  public int ImgIndex { get; set; } 
}

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

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

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

PS：上傳到服務(wù)器的臨時(shí)文件夾內(nèi)，當(dāng)用戶點(diǎn)擊保存才把這些文件移動(dòng)到正式目錄下。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: