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


Posted in Javascript onMay 28, 2018

本文实例为大家分享了微信小程序实现图片上传功能的具体代码,供大家参考,具体内容如下

前端:微信开发者工具

后端:.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:上传到服务器的临时文件夹内,当用户点击保存才把这些文件移动到正式目录下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 #Javascript
讲解vue-router之什么是编程式路由
May 28 #Javascript
讲解vue-router之什么是嵌套路由
May 28 #Javascript
微信小程序上传图片实例
May 28 #Javascript
讲解vue-router之什么是动态路由
May 28 #Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 #Javascript
微信小程序实现上传图片功能
May 28 #Javascript
You might like
帅气的琦玉老师
2020/03/02 日漫
用缓存实现静态页面的测试
2006/12/06 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
php二维数组转成字符串示例
2014/02/17 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
微信小程序入门之绘制时钟
2020/10/22 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
详细介绍Python函数中的默认参数
2015/03/30 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
python3判断url链接是否为404的方法
2018/08/10 Python
python3 pygame实现接小球游戏
2019/05/14 Python
python 操作hive pyhs2方式
2019/12/21 Python
keras 权重保存和权重载入方式
2020/05/21 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
房地产管理毕业生自荐信
2013/11/04 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
个人综合鉴定材料
2014/05/23 职场文书
经典团队口号
2014/06/06 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
食品安全主题班会
2015/08/13 职场文书