一、查看小程序手册:
选择图片:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
上传图片:https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html
二、上传图片界面和实现逻辑
上传图片界面实现逻辑
小程序身份认证界面,点击上传地方的加号,选择相册或者拍照,进行上传,原图无压缩,最多上传3张(分别为身份证正面、反面和手持)。
三、服务器后台定义文件上传路由和文件上传方法
注:这边以laravel框架为例
1、定义文件上传路由:
Route::group(['middleware'=>'auth:api','prefix'=>'v1','namespace'=>'Api'],function (){
// 用户身份认证信息文件上传
Route::post('user/up_file','UserController@up_file');
});
2、在laravel框架中的config文件夹下的filesystems.php文件中配置上传路径
配置文件上传路径3、身份认证文件上传方法
// 身份认证文件上传
public function up_file(Request $request)
{
if ($request->hasFile('file')) {
// 上传
$ret = $request->file('file')->store($request->get('openid'), 'card');
$pic = '/uploads/card/' . $ret;
return ['status' => 0, 'url' => $pic];
}
return ['status' => 10005, 'msg' => '无图片上传'];
}
四、小程序中的文件上传步骤
1、在身份认证界面的wxml中绑定选择图片事件
2、在身份认证界面的js中定义上传图片的方法
代码如下:
// 身份认证文件上传
up_file(){
wx.chooseImage({
count: 3,
sizeType: ['original', 'compressed'], // original 原图 compressed 压缩图
sourceType: ['album', 'camera'], // album 从相册选图 camera 使用相机
success: res => {
// console.log(res);
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
// 开始身份文件上传
tempFilePaths.map(filepath => {
wx.uploadFile({
url: config.up_file,
filePath: filepath,
name: 'file',
header: {
'Authorization': 'Bearer '+cache.get('token')
},
formData: {
'openid': cache.get('openid')
},
success: res=>{
console.log(res);
let json = JSON.parse(res.data);
console.log(json);
this.setData({
up_file: [...this.data.up_file,json.url]
});
}
})
})
}
})
}
3、上传成功后,将上传的文件地址存到数组中
参数的展开 上传成功后,将上传的文件地址存到数组中
网友评论