麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 課堂 > 小程序 > 正文

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

2020-03-21 16:17:16
字體:
來源:轉載
供稿:網友

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

前端:微信開發者工具

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

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


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 在线观看91精品 | 国产一级一级 | 成人免费一区二区三区 | 92自拍视频 | 成人免费一区二区 | 欧美激情精品久久久久久久久久 | 99sesese| 九九热免费视频在线观看 | 国产午夜电影在线观看 | 午夜男人在线观看 | 国产成人自拍小视频 | 国产毛片网站 | 欧美精品一区二区久久 | 成人免费看片a | 精品国产一区二区三区蜜殿 | 亚洲精品7777xxxx青睐 | 羞羞答答xxdd在线播放 | 国产成人高清成人av片在线看 | 久久国产精品99国产 | 国产成人在线网站 | 国内精品久久久久久久影视红豆 | 日本精品视频一区二区三区四区 | 国产免费久久久久 | 电影av在线| 一级免费看片 | 中文字幕www.| 久久手机在线视频 | 精品国产一区二区三区在线 | 欧美中文字幕一区二区 | a黄网站 | 免费成人| 日本最新免费二区三区 | 婷婷久久青草热一区二区 | 欧美色视频免费 | 成人做爰s片免费看网站 | 欧美日韩亚洲视频 | 日韩在线播放中文字幕 | 中国精品久久 | 精品国产呦系列在线看 | 日本中文字幕电影在线观看 | 中文字幕免费一区 |