国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

微信小程序實現圖片上傳功能

2019-11-19 13:45:48
字體:
來源:轉載
供稿:網友

本文實例為大家分享了微信小程序實現圖片上傳功能的具體代碼,供大家參考,具體內容如下

前端:微信開發者工具

后端:.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("http://", "/");   }   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:上傳到服務器的臨時文件夾內,當用戶點擊保存才把這些文件移動到正式目錄下。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 杂多县| 黄陵县| 和静县| 浑源县| 嘉禾县| 阿拉善右旗| 无极县| 垦利县| 仲巴县| 柳林县| 临江市| 仙居县| 舞钢市| 大埔县| 永川市| 田东县| 四会市| 明溪县| 黄山市| 龙胜| 江安县| 宁国市| 洛南县| 永春县| 利津县| 长兴县| 永济市| 青田县| 和林格尔县| 凭祥市| 德格县| 瓮安县| 从化市| 内乡县| 银川市| 囊谦县| 北川| 嵊泗县| 诸暨市| 交口县| 察哈|