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

概述

一、如下

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

利用uniapp的组件chooseImage:

takePhoto(){
				let self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera'],
					success: function(res){
						let tempFilePaths = res.tempFilePaths;
						self.getToken(tempFilePaths);
					}
				});
			},

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

代码如下(示例):

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.七牛云上的指定存储空间的上传网址

在这里插入图片描述


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,后台代码

/**
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;
    }

最后

以上就是迷人饼干为你收集整理的uniapp前端js来实现打开移动端的相机功能,并将图片通过七牛云获得图片网络地址保存到数据库一、如下的全部内容,希望文章能够帮你解决uniapp前端js来实现打开移动端的相机功能,并将图片通过七牛云获得图片网络地址保存到数据库一、如下所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(57)

评论列表共有 0 条评论

立即
投稿
返回
顶部