微信小程序上传图片到服务器实例代码
时间:2019-04-08
本文章向大家介绍微信小程序上传图片到服务器实例代码,主要包括微信小程序上传图片到服务器实例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上传图片到服务器:
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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- VUE项目使用.env文件配置全局环境变量
- 设计模式学习(六)-抽象工厂模式
- 彻底完美解决安卓苹果手机点击输入框网页页面自动放大缩小
- 第22天:NLP实战(六)——基于PaddleHub的疫情期间网民情绪识别
- Echarts大数据可视化物流航向省份流向迁徙动态图,开发全解+完美参数注释
- Linux 常用操作以及概念
- GCD梳理与总结——封装
- 原生JS在网页上复制的所有文字后面自动加上一段版权声明
- 使用宝塔docker安装为知笔记私有部署
- 第4天:美团点评2020校招测试方向笔试试卷分析
- Element-UI饿了么时间组件控件按月份周日期,开始时间结束时间范围限制参数
- 微信小程序flex布局
- 细数 TS 中那些奇怪的符号
- 安装RabbitMQ无法访问localhost:15672的管理界面解决
- koa中http服务与websocket服务共享端口