在Vue中实现app拍照-选取本地图库-图片上传成功后预览
基于Vue和uni-app实现手机app的功能实现和打包。拍照功能和选取本地图片使用的是HTML5的API 实现。
我为测试这个功能使用node写了个本地服务器，对于手机调试，可以通过连接同一个无线网访问对应的地址进行测试。
选取本地图片
gallery
Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。
gallery有两个方法： pick 和 save 通过名称可知一个是选择图库文件一个是保存到图库中，这里只使用了 pick 方法。
void plus.gallery.pick(successCB, errorCB, options);
// 从相册中选择图片
function galleryImg() {
// 从相册中选择图片
console.log("从相册中选择图片:");
plus.gallery.pick( function(path){
// 返回的路径等会上传的时候要用
console.log(path);
}, function ( e ) {
// 失败的回调函数
console.log( "取消选择图片" );
}, {
// 图片获取的选项
// 图库文件过滤选项
filter:"image",
} );
}
// 从相册中选择多张图片
function galleryImgs(){
// 从相册中选择图片
console.log("从相册中选择多张图片:");
plus.gallery.pick( function(e){
for(var i in e.files){
console.log(e.files[i]);
}
}, function ( e ) {
console.log( "取消选择图片" );
},{
filter:"image",
// 是否可以多选
multiple:true,
// 设定最多可选取数量
maximum:3,
// 是否使用系统相册文件选择界面
system:false,
// 当超过设定的选取数量触发的事件
onmaxed:function(){
plus.nativeUI.alert('最多只能选择3张图片');
}
});
}
// 获取相册图片
// 从相册中选择多张图片
galleryImgs(url, imgMaxNum) {
// 从相册中选择图片
console.log('从相册中选择多张图片:')
plus.gallery.pick(function (e) {
// 成功回调
console.log(e)
// 如果选取成功则执行上传功能
// 创建任务
// 返回以upload对象
let task = plus.uploader.createUpload(url,
{
method: 'POST',
// 上传任务每次上传的文件块大小（仅在支持断点续传的服务有效）
// 数值类型，单位为Byte（字节），默认值为102400，若设置值小于等于0则表示不分块上传
blocksize: 10000000000000000000000000,
// 上传任务的优先级,数值类型，数值越大优先级越高，默认优先级值为0。
priority: 100,
// 上传任务超时时间
timeout: 51000
},
// 完成函数，成功失败都会调用次函数
function (t, status) {
// 上传完成
if (status == 200) {
// 上传成功返回url
alert('Upload success: ' + t.url)
} else {
alert('Upload failed: ' + status)
}
}
)
// 遍历添加文件
for (var i in e.files) {
// 使用图片选取后返回的文件路径
// param 1添加上传文件的路径
// param2 可通过此参数设置上传任务属性，如文件标识、文件名称、文件类型等, key如果重复会导致上传失败
// 函数返回一个布尔值，代表添加文件成功与否
task.addFile(e.files[i], { key: 'ducha' + i + Math.random() * 10 })
}
// 添加上传数据
if (imgType !== undefined) {
task.addData('IMG_TYPE', imgType)
}
task.start()
}, function (e) {
// 失败回调
console.log('取消选择图片')
},
{
// options
filter: 'image',
// 多选
multiple: true,
// 是否调用手机终端自带的相册页面
system: true,
maximum: imgMaxNum || '',
onmaxed: function () {
plus.nativeUI.alert('最多只能选择' + imgMaxNum + '张图片')
}
})
}
拍照
camera
Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。
它具有一个方法 getCamera
// 返回一个摄像头管理对象，只有需要拍照和录像功能需要先获取此对象才行
// index 表示摄像头，1默认摄像头（主摄像头），2表示副摄像头
Camera = plus.camera.getCamera( index )
Camera 摄像头管理对象具有三个方法，分别是获取拍照功能 captureImage 和获取录像功能 startVideoCaputer 和停止录像功能 stopVideoCaputer 。
我们使用 captureImage 方法进行拍照功能的实现。
功能具有拍照，压缩,上传功能
/**
*
* @param {上传的url} url
* @param {上传后得到的回调} callback
* @param {上传失败的回调} errBack
*/
function camera(url, callback, errBack) {
// 获取到camera
let cmr = plus.camera.getCamera();
// 调用cmr的captureImage方法进行拍照功能的调用
cmr.captureImage(function() {
// 成功回调
// 通过resolveFileSystemURL 获取真实地址
plus.io.resolveLocalFileSystemURL(e, function(entry) {
let imgUrl = entry.toLocalURL();
let imgName = new Date().valueOf();
let imgSuffix = imgUrl.substr(e.lastIndexOf('/') + 1);
// 进行压缩
plus.zip.compressImage(
{
src: imgUrl,
// 压缩后图片的路径
dst: '_doc/' + imgName + imgSuffix,
overwrite: true,
quality: 50,
// 高度可以根据自己的需求设定
height: '100px'
},
function(event) {
// 压缩成功回调
let target = event.target;
// 调用上传组件
upload(url, target, callback, errBack);
},
function() {
// 失败回调
}
);
});
});
}
/**
*
* @param {上传的url} url
* @param {用来上传的图片地址} target
* @param {上传后得到的回调} callback
* @param {上传失败的回调} errBack
*/
function upload(url, target, callback, errBack) {
var task = plus.uploader.createUpload(
url,
{
method: 'POST',
blocksize: 888888,
priority: 100,
timeout: 51000
},
function(data, status) {
// 上传完成
if (status === 200) {
return callback(data.responseText);
} else {
errBack(data);
}
}
);
task.addFile(target, {
key: 'a' + Math.random() * 10
});
task.start();
}
图片预览功能
使用vue-image-swiper实现一个预览页面
-
![]()
-
关于后端的服务器和整体项目
后期会上传到 `github` 上