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

如何通过已知文件路径创建一个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访问不了呢

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