uniapp前端js来实现打开移动端的相机功能，并将图片通过七牛云获得图片网络地址保存到数据库一、如下

118 阅读 0 评论 78 点赞

我是靠谱客的博主迷人饼干，这篇文章主要介绍uniapp前端js来实现打开移动端的相机功能，并将图片通过七牛云获得图片网络地址保存到数据库一、如下，现在分享给大家，希望可以做个参考。

一、如下

1.首先实现相机拍照功能

利用uniapp的组件chooseImage：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
takePhoto(){
				let self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera'],
					success: function(res){
						let tempFilePaths = res.tempFilePaths;
						self.getToken(tempFilePaths);
					}
				});
			},

2.获取七牛云所需要的token并将图片上传到七牛云的存储空间

代码如下（示例）：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
getToken(path) {
				let self = this;
				//此处是生成唯一的图片标识名称
				const timestamp = +new Date() + '';
				const randomNum = parseInt((1 + Math.random()) * 65536) + '';
				let fileName = (+(randomNum + timestamp)).toString(32);
				//向后台发送请求获取七牛云所需要的token
				request.post('/common/getToken').then((res) => {
					console.log("token",res)
					if (res.code === 0) {
						let token = res.data;
						/**
						*接下来使用uniapp的组件uploadFile实现上传
						*这里的url是七牛云官方提供的上传地址（地址看下一段的具体介绍）
						*/
						uni.uploadFile({
							url: 'https://up.qiniup.com', 
							filePath: path[0],
							name: 'file',
							formData: {
								'key': fileName,
								'token': token
							},
							success: (uploadFileRes) => {
								console.log("js上传",uploadFileRes);
								//这里拿到已经生成图片的网络地址，可以做相应的数据库存储操作
								},
						});
					}
				});
			},

3.七牛云上的指定存储空间的上传网址

在这里插入图片描述

复制代码

1
2
3
4
5
6
7
8

https://up.qiniup.com 		代表华东区域
https://up-z1.qiniup.com	代表华北区域
https://up-z2.qiniup.com 	代表华南区域
https://up-na0.qiniup.com	代表北美区域
https://up-as0.qiniup.com 	代表东南亚区域

4.获取七牛云的token，后台代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
ak 和 sk 是使用七牛云接口的密钥
bucket 是所指定的存储空间名称
*/
 public String getToken() {
        String accessKey = ak;
        String secretKey = sk;
        String bucket1 = bucket;
        Auth auth = Auth.create(accessKey, secretKey);
        String upToken = auth.uploadToken(bucket1);
        return upToken;
    }