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


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 相关文章推荐
node.js中的fs.chown方法使用说明
Dec 16 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
js实现抽奖效果
Mar 27 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
微信小程序上传图片功能(附后端代码)
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积分兑换接口实例
2015/02/09 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
如何利用python生成MD5并去重
2020/12/07 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
营销专业应届生求职信
2013/11/26 职场文书
师生聚会感言
2014/01/26 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
担保书怎么写
2014/04/01 职场文书
励志演讲稿范文
2014/04/29 职场文书
质量承诺书格式
2014/05/20 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
文明旅游倡议书
2015/04/28 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书