h5调用手机相册上传文件、返回File文件/上传结果路径_h5页面上传文字和图片,返回文字和图片

本方法一来plus所以需在模拟器/打包后中使用 文档可参考 HTML5+ API Reference

效果图

/**
 * 调用手机相册
 * @param { Number } maximum 可选择图片的最大数量
 * @param { String } type 返回的数据类型 目前可选值 File、url  默认为URL
 * @returns [ '根据类型返回的数组' ]
 */
export function galleryImgs({
    maximum,
    type
}){ 
    return new Promise((resolve, reject) => { 
        plus.gallery.pick( 
            (e)=>{ 
                if(e.files.length == 0){
                    return resolve([])
                }
                let PromiseAll = []

                for(let i in e.files){   
                    PromiseAll.push(
                        new Promise((rs, rj) =>{ 
                            let p = plus.io.convertLocalFileSystemURL(e.files[i]); 
                            let filePath = p; 
                            if(plus.os.name=='iOS'){ 
                                filePath = 'file://'+p; 
                            }
                            plus.io.resolveLocalFileSystemURL(
                                filePath, //指定的目录
                                (entry) =>{ 
                                    entry.file((file)=>{ 
                                        var fileReader = new plus.io.FileReader();
                                        fileReader.readAsDataURL(file);//以BASE64编码格式读取文件  
                                        fileReader.onloadend = function(evt) {
                                            console.log('evt',evt)     
                                            //base64编码格式转file格式
                                            var aa = evt.target.result; 
                                            var arr = aa.split(','),
                                            mime = arr[0].match(/:(.*?);/)[1],
                                                bstr = atob(arr[1]),
                                                n = bstr.length,
                                                u8arr = new Uint8Array(n);
                                            while (n--) {
                                                u8arr[n] = bstr.charCodeAt(n);
                                            }
                                            var fileResult = new File([u8arr], evt.target.fileName.split('/').at(-1), { type: mime });
                                            console.log('最终文件',fileResult)
                                            if(type == 'file'){
                                                return rs(fileResult) ;
                                            }
                                            let file1 = new FormData()
                                            file1.append('file',fileResult)
                                            // fileUpload 为调用上传接口的方法
                                            fileUpload(file1).then(async (res: any) => {
                                                console.log('上传结果',res.data) 
                                                rs(res.success ? res.data : false) 
                                            }); 
                                            // console.log(aa)
                                        }   
                                    }) 
                                },
                                (err) => {
                                    console.log("访问指定目录失败:" + err.message,err);
                                    Toast("访问指定目录失败:" + err.message) 
                                    rj()
                                }
                            ); 
                        })
                    )
                }
                Promise.all(PromiseAll).then(res=>{
                    console.log('上传结果',res)  
                    resolve(res.filter(i=>i))
                }).catch(e=>{
                    console.log(e)
                })
            }, 
            ( e ) => {
                console.log( "取消选择图片" ); 
                reject()
            },
            {filter:"image",multiple:true,maximum:maximum||9,permissionAlert:true} 
        ); 
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84