我是靠谱客的博主 迷人饼干,最近开发中收集的这篇文章主要介绍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来实现打开移动端的相机功能,并将图片通过七牛云获得图片网络地址保存到数据库一、如下所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复