一、效果展示
二、思路:
1、首先调用wx.getUserProfile这个API授权登录
2、wx.chooseImage选择图片API
3、上传至服务器,wx.uploadFile
(具体参数可以看微信开发文档https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html)
三、代码演示:
1、授权登录:首先得在wxml中定义一个button绑定一个函数onload,js代码如下
Page({
data: {
},
//授权登录函数
onload:function(){
wx.getUserProfile({
lang:"zh_CN",
desc:"test",
success(res){
//需要跳转的页面
wx.navigateTo({
url: '/pages/index/index',
})
},
fail(res){
console.log("失败")
}
})
}
2、选择图片与上传图片:在授权登录与上传图片之间要加上一个导航API wx.navigateTo跳转到上传图片页面,同样上传图片也要定义一个button绑定相应的函数(这里是upload),若想再渲染一下界面可以再wxss里面编辑
wx.chooseImage({
count: 9,//图片的张数
sizeType: ['original', 'compressed'],//可以原图,压缩图
sourceType: ['album', 'camera'],//可以拍照,相册
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths}
for(let i=0;i<tempFilePaths.length;i++){
wx.uploadFile({
url: '119.23.254.220:8090/upload', //服务器的接口地址
header: {
"Content-Type": "multipart/form-data",
'accept': 'application/json',
'Authorization': "如果有token"
},
filePath: tempFilePaths[i],
name: 'file',
formData: {
'id': '4111055',
'file_form': 'jpg',
'param': '111'
},
success (res){
console.log("111")
},
})
}