fesk
fesk
  • 发布:2018-06-28 10:51
  • 更新:2020-01-16 16:34
  • 阅读:10591

如何通过已知文件路径创建一个input file对象?

分类:HTML5+

场景如下:当前使用了 阿里云javascript 上传SDK,必须是 标准的input file 对象才可以上传,现在调用PLUS gallery 或者 Camera 选取文件或者拍照录像后获取文件路径,之后怎么样才能根据这个文件路径 去创建一个file对象?

以下是我尝试的重新构建file对象,但是构建完后 数据会丢失,最明显的就是 size 变的很小 只有几十,请教如何处理这种情况!!!!!!!!

function galleryVideo(divid) {
// 从相册中选择视频

	    plus.gallery.pick(function(path){  
	       console.log(path);  
	       plus.io.resolveLocalFileSystemURL( path, function( entry ) {  
				// 可通过entry对象操作文件   
				entry.file( function(file){  
					  
					console.log(file.size + '--' + file.name);  
					//console.log(URL.createObjectURL(file));  
					//file = files;  
					newfile = new File([file], file.name);  
					  
					console.log(newfile.size + '--' + newfile.name);  
					  
					console.log(URL.createObjectURL(newfile));  
					//selectFile(newfile);  
				} );  
			}, function ( e ) {  
				alert( "Resolve file URL failed: " + e.message );  
			} );  
	    }, function(e){  
	    	console.log('取消选择视频');  
	    }, {filter:'video',system:false});  
	}  
2018-06-28 10:51 负责人:无 分享
已邀请:
6***@qq.com

6***@qq.com - 清风徐来

首先 楼主写的很好,我遇到了这个问题。
都是对的,但是 少了一行代码

reader.readAsDataURL(entry);

没有这行的话,系统不会执行onloadend 里面的事件 也不会报错。

回梦無痕

回梦無痕 - 暂停服务

标准的input file 对象不能自己手动创建吧?如果可以创建,那网页不是可以随便读取用户设备的文件(照片)上传?

  • fesk (作者)

    提交过阿里云工单,技术回复是 根据文件路径自行创建file对象,再使用SDK上传,不知道5+有没有办法实现这个需求。


    2018-06-28 15:41

fesk

fesk (作者)

需求解决,来填坑,大概思路:

1:通过返回文件路径操作文件对象 resolveLocalFileSystemURL
2:读取文件内容 FileReader readAsDataURL
3:将文件内容 e.target.result 转换为 BLOB对象
4:BLOB 再转换为FILE对象 (至此 已大致等同于 input file 对象)
5:可以调用预览、上传
当前只为解决需求,没有深究,转换后的file对象已经可以满足阿里云视频上传 javascript SDK所需的格式,可以正常通过SDK上传 转码

安卓、iPhone 测试都可行 以下是代码供参考:

// 从相册中选择视频
function galleryVideo() {
plus.gallery.pick(function(path){

	       //console.log(path);  
	       plus.io.resolveLocalFileSystemURL( path, function( entry ) {  
				// 可通过entry对象操作文件   
				  
				entry.file( function(file){  
					  
					//为什么file.type 为 -1 ?没搞明白 手动设置为 video/MP4  
					//console.log("getFile:" + JSON.stringify(file));  
					reader = new plus.io.FileReader();  
					  
					reader.onloadend = function ( e ) {  
						//plus.console.log( "Read success" );  
						// Get data  
						//plus.console.log( e.target.result );  
						//读取文件内容 dataurl 转化为BLOB对象  
						var blob = dataURLtoBlob(e.target.result);  
						//BLOB对象转换为FILE对象   
						newfile=new File([blob],file.name);  
						  
						//预览视频  
						selectFile(file.size,entry.toURL(),'video/mp4');  
						//console.log(newfile.size+'---'+newfile.name);  
						//console.log(entry.toURL());  
						  
					};  
					reader.readAsDataURL( file );  
					  
				} );  
			}, function ( e ) {  
				//alert( "Resolve file URL failed: " + e.message );  
			} );  
	    }, function(e){  
	    	console.log('取消选择视频');  
	    }, {filter:'video',system:false});  

}

//调用摄像头录像
function getVideo(){

	//console.log('开始录像:');  
	var cmr = plus.camera.getCamera();  
	cmr.startVideoCapture(function(path){  
		//outLine('成功:'+p);  
		plus.io.resolveLocalFileSystemURL(path, function(entry){  
			  
			entry.file( function(file){  
					  
					//为什么file.type 为 -1 ?没搞明白 手动设置为 video/MP4  
					console.log("getFile:" + JSON.stringify(file));  
					reader = new plus.io.FileReader();  
					  
					reader.onloadend = function ( e ) {  
						//plus.console.log( "Read success" );  
						// Get data  
						//plus.console.log( e.target.result );  
						//读取文件内容 dataurl 转化为BLOB对象  
						var blob = dataURLtoBlob(e.target.result);  
						//BLOB对象转换为FILE对象   
						newfile=new File([blob],file.name);  
						  
						//预览视频  
						selectFile(file.size,entry.toLocalURL(),'video/mp4');  
						console.log(newfile.size+'---'+newfile.name);  
						console.log(entry.toLocalURL());  
						  
					};  
					reader.readAsDataURL( file );  
					  
				} );  
		}, function(e){  
			console.log('读取录像文件错误:'+e.message);  
		} );  
	}, function(e){  
		console.log('失败:'+e.message);  
	}, {filename:'_doc/camera/',index:1});  
}  

//转换为BLOB对象
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}

后: 还是有很多小问题未解决 如 file.type 为-1 或者 2 只能手动设置成了video/mp4 ,iPhone下 选择视频文件 获取绝对路径有点不对(对视频预览有影响) 录像模式下获取绝对路径是正常的,有更好的思路或解决办法 还请不吝赐教!

苛学加

苛学加 - 向阳而生

mark

hhyang

hhyang - 如有问题,请添加QQ1606726660 备注付费咨询

blob了解一下

D丶

D丶

为什么我小程序可以访问视频,app访问不了呢

该问题目前已经被锁定, 无法添加新回复