又是学习的一天,新公司的代码,原来前端做拍照识别挺简单的

133 阅读1分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第12天,点击查看活动详情

一、下面来看一串代码片段吧

			bankcark() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success(res) {
						console.log(res, 'tempFilePaths');
						_this.uploadFile(res.tempFilePaths[0]);
					}
				});
			},
			async uploadFile(image) {
				uni.showLoading({
					mask: true,
					title: '�ϴ���...'
				});
				// #ifdef APP-PLUS
				this.image = await this.http.compress(image); 
				// #endif
				// #ifdef H5
				this.image = image;
				// #endif
				uni.uploadFile({
					url: this.http.commoneUrl + '/file/upload', 
					filePath: this.image,
					name: 'file',
					header: {
						Authorization: uni.getStorageSync('access_token')
					},
					success: uploadFileRes => {
						uni.hideLoading();
						let list = JSON.parse(uploadFileRes.data);
						if (list.code == 500) {
							uni.showToast({
								title: list.msg || '�ϴ�ʧ��',
								icon: 'none',
								duration: 3000
							})
							return
						}
						let data = {
							imgUrl: list.data.url
						};
						this.http.postRequestlist('/app/user/bankCartDiscern', data).then(res => {
							if (res.code == 200) {
								this.onlist(res.data.bankcardid);
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						}).catch(err => {
							uni.showToast({
								title: err || '�������',
								icon: 'none'
							});
						});
					},
					fail: err => {
						uni.showToast({
							title: err || '�ϴ�ʧ��',
							mask: true
						})
						uni.hideLoading();
					}
				});
			},

二、实现思路

1、用uni开发可以调用chooseImageAPI来实现用户的拍照功能

2、通过uploadFile上传到后台,然后后端统一处理返回数据

3、然后我们接收展示数据啦

目前对于我这个阶段来说可能是够用的

又是成功摸鱼的一天