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


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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 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 开源框架22个简单简介
2009/08/24 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
如何打开php的gd2库
2017/02/09 PHP
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
python自定义类并使用的方法
2015/05/07 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
python程序封装为win32服务的方法
2021/03/07 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
中海讯通笔试题
2015/09/15 面试题
房屋公证委托书
2014/04/03 职场文书
迎国庆演讲稿
2014/09/05 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书