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


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 面向对象编程
Oct 28 Javascript
Javascript结合css实现网页换肤功能
Nov 02 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
微信小程序实现人脸识别
May 25 Javascript
搭建vue开发环境
Jul 19 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
解决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
mysql 性能的检查和优化方法
2009/06/21 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
Python标准库sched模块使用指南
2017/07/06 Python
python中返回矩阵的行列方法
2018/04/04 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
Python3 修改默认环境的方法
2019/02/16 Python
python协程之动态添加任务的方法
2019/02/19 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
个人廉洁自律承诺书
2014/03/27 职场文书
年度考核个人总结
2015/03/06 职场文书
学校远程教育工作总结
2015/08/11 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python