首页 > 课堂 > 小程序 > 正文

微信小程序实现图片上传功能

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武林网。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表