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


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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
jQuery插件的写法分享
Jun 12 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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 缓存实现代码及详细注释
2010/05/16 PHP
php cookie 详解使用实例
2016/11/03 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
使用Python求解最大公约数的实现方法
2015/08/20 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
Why do we need Unit test
2013/01/03 面试题
部队领导证婚词
2014/01/12 职场文书
小学生成绩单评语
2014/12/31 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
Go语言grpc和protobuf
2022/04/13 Golang