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


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 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 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
php中计算程序运行时间的类代码
2012/11/03 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
Python实现屏幕截图的两种方式
2018/02/05 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
银行财务部实习生的自我鉴定
2013/11/27 职场文书
党员十八大心得体会
2014/09/12 职场文书
售后客服个人自我评价
2014/09/14 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
综治目标管理责任书
2015/05/11 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript