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


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 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
JS实现纸牌发牌动画
Jan 19 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
Banner程序
2006/10/09 PHP
PHP编程风格规范分享
2014/01/15 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
python 2.7.14安装图文教程
2018/04/08 Python
使用python编写监听端
2018/04/12 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
python中wheel的用法整理
2020/06/15 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
演讲稿怎么写才完美
2014/01/02 职场文书
目标管理责任书
2014/04/15 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
党员公开承诺书2015
2015/01/21 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS