javascript原生移动云编程10 - 如何调用相机并上传下载图片视频

用javascript在码实云平台上，可以在云里编写原生的移动应用。移动应用经常需要用手机拍照或摄像，并且把照片视频上传到云存储里。由于码实平台提供了全面的云服务，多媒体的上传下载就变得非常容易。这个应用实例用到了码实平台的云数据库，因此建议你先熟悉下前面那个如何使用云数据库的教程。

码实平台里，多媒体数据是数据BO的一种字段类型，在数据BO编辑工具里称为“附件”(Attachment)。附件里可以记录多张照片或其他多媒体文件，附件字段本质上是记录了一组多媒体文件在云存储里的存取id数组。本实例包括了两个页面，构成和前面的数据教程完全一样。由于大部分代码相同，这里指讲解新的代码。

页面1的完整代码请到web工具的开源部分查看，其中显示播放照片列表代码如下，关键部分是用码实平台SDK的Mash5.UI.createAttachmentView显示附件。

 // Render单条数据UI
	createRow : function (feed) {
        var context = this.getContext();
		var row = Ti.UI.createTableViewRow({
			width : '100%',
			height : Ti.UI.SIZE,
			selectionStyle : 0,
		});

		var view = Ti.UI.createView({
			width : Ti.UI.FILL,
			height : Ti.UI.SIZE,
			top : '10dip',
			left : '10dip',
			right : '10dip',
			backgroundColor : '#629138',
			borderRadius : dipToPx(10),
			layout: 'vertical'
		});
		row.add(view);

		// 显示附件字段，BO的第二个字段
		var attachments = (feed.bo.Fields[1].Value && feed.bo.Fields[1].Value instanceof Array) ? 

		if (attachments.length > 0) {
            // 调用SDK中的方法Mash5.UI.createAttachmentView, 点击可下载图片
			var attachmentView = Mash5.UI.createAttachmentView(context, {
				attachments : attachments,
				width : Ti.UI.SIZE,
				isEditable : false,
			});
			attachmentView.getView().left = '3dip';
			attachmentView.getView().bottom = '5dip';
            view.add(attachmentView.getView());
		}
        // 再显示第一个字段，做为图片的说明
		view.add(Ti.UI.createLabel({
			bottom : '5dip',
			color : '#fff',
			text : feed.bo.Fields[0].Value,
			left : '10dip',
			font : {fontSize : '16dip'},
		}));
		return row;
	}

页面2的完整代码请到web工具的开源部分查看，这个页面也是和云数据操作的那个教程雷同。其中引入了相机上传照片的操作，分别定义在如下的两个函数里。Mash5.Tenant.File.uploadFromCamera提供了调用相机拍照并且上传照片的完整功能。而在createParameters里面，我们使用的码实平台SDK提供的Mash5.UI.createProgressDialog来显示标配的照片上传进度条。

startCamera: function(attachView) {
        var parameters = this.createParameters(attachView);
        Mash5.Tenant.File.uploadFromCamera({
            context: this.getContext(),
            onprogresschanged: parameters.onprogresschanged,
            setCancelListener: parameters.setCancelListener
        }, parameters.onload);
    },

createParameters: function(attachView) {
        var progressDialog = Mash5.UI.createProgressDialog();
        progressDialog.setProgress(0, '正在上传...');
        return {
            onprogresschanged: function(progress) {
                progressDialog.show();
                progressDialog.setProgress(progress, '正在上传...');
            }.bind(this),
            setCancelListener: function(listener) {
                progressDialog.setCancelListener(listener);
            },
            onload: function(r) {
                progressDialog.hide();
                setTimeout(function() {
                    progressDialog.hide();
                }, 600);
                if (r.success) {
                    var attachment = r.fileInfo;
                    if (attachView && attachment) {
						attachView.clear();
						attachView.addAttachment(attachment);
					}
                } else {
                    alert(r.message);
                }
            }.bind(this)
        };
    },