本文實例為大家分享了微信小程序實現圖片上傳功能的具體代碼,供大家參考,具體內容如下
前端:微信開發者工具
后端:.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武林網。
新聞熱點
疑難解答