本文实例为大家分享了微信小程序实现图片上传功能的具体代码,供大家参考,具体内容如下
前端:微信开发者工具
后端:.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:上传到服务器的临时文件夹内,当用户点击保存才把这些文件移动到正式目录下。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]