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


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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 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下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php+mysql写的简单留言本实例代码
2008/07/25 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
php模板函数 正则实现代码
2012/10/15 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
JavaScript模块详解
2017/12/18 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
举例详解Python中yield生成器的用法
2015/08/05 Python
Python实现堆排序的方法详解
2016/05/03 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
阿尔卡特(中国)的面试题目
2014/08/20 面试题
五年级科学教学反思
2014/02/05 职场文书
小学语文国培感言
2014/03/04 职场文书
初三新学期计划书
2014/05/03 职场文书
英文慰问信范文
2015/03/24 职场文书
红色故事汇观后感
2015/06/18 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python