微信图片 自动上传到服务器,微信小程序怎样使图片上传至服务器
这次给大家带来微信小程序怎样使图片上传至服务器,微信小程序使图片上传至服务器的注意事项有哪些,下面就是实战案例,一起来看一下。-wxml
发布项目
/**选择图片 */
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) {
}
})
},
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
在ES6里模板字符串使用详解
在Bootstrap里怎么操作table
微信图片 自动上传到服务器,微信小程序怎样使图片上传至服务器相关推荐
- 微信小程序开发之文件上传下载应用场景(附Demo源码)
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
- 微信小程序+SpringBoot实现文件上传与下载
微信小程序+SpringBoot实现文件上传与下载 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 1.1.2 设置上传文件大小限制 1.1 ...
- 微信小程序用户头像编辑上传
微信小程序用户头像编辑上传 近期接触了一个小程序项目,需要可以修改用户头像,默认获取用户当前微信头像,点击头像,可调用手机照相机或者本地相册,更换图片. html代码如下: js代码:
- 微信小程序云开发-批量上传文件到云储存空间
微信小程序开发 自己最近在玩微信小程序,准备记录一些自己遇到的,网络上没有对应教程(也许是自己没找到),或者是教程比较少的问题,然后给出自己的解决方案 目录 微信小程序开发 问题 一.云储存是什么? ...
- 微信小程序云开发实现上传文件和预览下载文件
微信小程序云开发实现上传文件和预览下载文件 一.前言 目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...
- 微信小程序java中文乱码_如何解决微信小程序显示中文无法上传或者出现乱码的问题?...
今天小编给大家讲解如何解决微信小程序显示中文无法上传或者出现乱码的问题?有需要或者有兴趣的朋友们可以看一看下文,相信对大家会有所帮助的. 在formData中对文字进行编码,使用encodeURI() ...
- 小程序上传音频失败_微信小程序实现录音后上传文件方法详细
本篇文章讲述了微信小程序实现录音后上传文件方法,大家对微信小程序实现录音后上传文件方法不了解的话或者对微信小程序实现录音后上传文件方法感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 ...
- 微信小程序之身份证照片正反上传
效果图 点击方框调取手机相册选取图片进行上传,后端识别身份证采用的是orc识别 <view class="certification"><view class=& ...
- [小黄书后台]文件上传到服务器
上一篇文章我们实现了小黄书后台框架中的鉴权服务.今天我们会开始实现文件上传的服务,因为我们参考的小红书中有很多地方是需要上传图片的,比如商品的图片等. 1. Express Multer中间件 Exp ...
最新文章
- CVPR2020 | 反传统的无监督人脸旋转方案:旋转-渲染
- unity3D 4.6及以上版本. UI穿透问题,以及模拟器不穿透真机穿透问题解决方案
- Class对象和反射
- 类型转换_异常处理机制
- html怎么填充颜色渐变,CSS实现不规则图形,填充渐变色
- 【安利向】入坑半年的GPU云平台,三分钟训练起飞!xiu~
- 【Kafka】kafka Current offset xxx for partition xxx out range
- linux解析json指针,Linux下JSON通信协议的使用和解析
- endnote安装_EndNote X8 系列教程(一):软件介绍与安装
- 扑克牌大小的充电宝,你有吗?
- 《版式设计——日本平面设计师参考手册》—第1章段落样式和字符样式的基础知识...
- 大象跳舞系列之Spark on HDInsight (1)
- 腾讯电脑管家卸载后的残留信息有哪些
- 开发部程序员绩效考核办法
- Java基础-运算符
- Navicat premium 12 闪退问题(非有道词典问题)
- Silvaco TCAD——二维工艺仿真
- 经纬度与UTM(Universal Transverse Mercator Projector:通用横轴卡墨托投影)的坐标变换代码
- 《奇点临近(The Singularity is Near:When Humans Transcend Biology)》
- 前端总线频率(FSB)及DDR内存频率详解,彻底让你明白CPU总线带宽与内存带宽匹配问题!