微信小程序上传图片到服务器实例代码


Posted in Javascript onNovember 07, 2017

上传图片到服务器:

1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来。

微信小程序上传图片到服务器实例代码

-wxml
 <view class="shangchuan" bindtap="choose">
  <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image>
 </view>
 <button formType='submit' class="fabu">发布项目</button>
 /**选择图片 */
 choose: function () {
  var that = this
  wx.chooseImage({
   count: 1,
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
   success: function (res) {
    var tempFilePaths = res.tempFilePaths
    that.setData({
     tempFilePaths: res.tempFilePaths
    })
    console.log(res.tempFilePaths)
    wx.setStorage({ key: "card", data: tempFilePaths[0] })
   }
  })
 },

2.使用wx.uploadFile将刚才上传的图片上传到服务器上

formSubmit2: function (e) {
    var that = this
    var card = wx.getStorageSync('card')
    wx.uploadFile({
     url: app.globalData.create_funds,
     filePath: card,
     name: 'card',
     formData: {
      'user_id': app.globalData.user_id,
      'person': e.detail.value.person,
      'company': e.detail.value.company,
     },
     success: function (res) {
      console.log(res)
     }
    })
   }
  }
 },

PS: 微信小程序上传一或多张图片

一.要点

1.选取图片

wx.chooseImage({
   sizeType: [], // original 原图,compressed 压缩图,默认二者都有
   sourceType: [], // album 从相册选图,camera 使用相机,默认二者都有
   success: function (res) {
    console.log(res);
    var array = res.tempFilePaths, //图片的本地文件路径列表
   }
  })

2.上传图片

wx.uploadFile({
   url: '', //开发者服务器的 url
   filePath: '', // 要上传文件资源的路径 String类型!!!
   name: 'uploadFile', // 文件对应的 key ,(后台接口规定的关于图片的请求参数)
   header: {
    'content-type': 'multipart/form-data'
   }, // 设置请求的 header
   formData: { }, // HTTP 请求中其他额外的参数
   success: function (res) {
   },
   fail: function (res) {
   }
  })

二.代码示例

// 点击上传图片
upShopLogo: function () {
  var that = this;
  wx.showActionSheet({
   itemList: ['从相册中选择', '拍照'],
   itemColor: "#f7982a",
   success: function (res) {
    if (!res.cancel) {
     if (res.tapIndex == 0) {
      that.chooseWxImageShop('album')  
     } else if (res.tapIndex == 1) {
      that.chooseWxImageShop('camera')
     }
    }
   }
  })
 },
 chooseWxImageShop: function (type) {
  var that = this;
  wx.chooseImage({
   sizeType: ['original', 'compressed'],
   sourceType: [type],
   success: function (res) {
/*上传单张
    that.data.orderDetail.shopImage = res.tempFilePaths[0],
    that.upload_file(API_URL + 'shop/shopIcon', res.tempFilePaths[0])
*/
 /*上传多张(遍历数组,一次传一张)
    for (var index in res.tempFilePaths) {
       that.upload_file(API_URL + 'shop/shopImage', res.tempFilePaths[index])
    }
*/
   }
  })
 },
upload_file: function (url, filePath) {
  var that = this;
  wx.uploadFile({
   url: url,
   filePath: filePath,
   name: 'uploadFile',
   header: {
    'content-type': 'multipart/form-data'
   }, // 设置请求的 header
   formData: { 'shopId': wx.getStorageSync('shopId') }, // HTTP 请求中其他额外的 form data
   success: function (res) {
    wx.showToast({
       title: "图片修改成功",
       icon: 'success',
       duration: 700
      })
   },
   fail: function (res) {
   }
  })
 },

总结

以上所述是小编给大家介绍的微信小程序上传图片到服务器实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
JSONP之我见
Mar 24 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 #Javascript
vue组件间通信子与父详解(二)
Nov 07 #Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 #Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 #Javascript
vue组件父与子通信详解(一)
Nov 07 #Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 #Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 #Javascript
You might like
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
python3图片转换二进制存入mysql
2013/12/06 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python 两种方法删除空文件夹
2020/09/29 Python
Python 多进程、多线程效率对比
2020/11/19 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
为什么要用EJB
2014/04/17 面试题
火山动力Java笔试题
2014/06/26 面试题
考试作弊被抓检讨书
2014/01/10 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
计划生育诚信协议书
2014/11/02 职场文书
2014年医生工作总结
2014/11/21 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
在职证明书模板
2015/06/15 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android