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


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 相关文章推荐
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
浅谈javascript中的闭包
May 13 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 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中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python中title()方法的使用简介
2015/05/20 Python
python list元素为tuple时的排序方法
2018/04/18 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python编写实现抽奖器
2020/09/10 Python
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
剪枝的学问教学反思
2014/02/07 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
团队拓展活动总结
2014/08/27 职场文书