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


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 相关文章推荐
ParseInt函数参数设置介绍
Jan 02 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
iview table高度动态设置方法
Mar 14 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
Prototype使用指南之selector.js
2007/01/10 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
django model object序列化实例
2020/03/13 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
高中物理教学反思
2014/02/08 职场文书
化妆品促销方案
2014/02/24 职场文书
环保宣传标语
2014/06/12 职场文书
租车协议书范本2014
2014/11/17 职场文书
中秋节晚会开场白
2015/05/29 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python