uniapp 进行文件的选取和上传

明日之后

h5端的可以直接使用

[JavaScript] 纯文本查看 复制代码

<input type="file" accept="" multiple>
//accept是用来规定选择文件的类型的，multiple可以用来多选

选到了文件就可以使用formdata添加文件进行上传

接下来是app端的

图片类型的自带的uni.chooseImage(OBJECT)就可以进行多选了
详情看官网地址：https://uniapp.dcloud.io/api/media/image
下面也是官网的demo

[JavaScript] 纯文本查看 复制代码

uni.chooseImage({
    count: 6, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: function (res) {
        console.log(JSON.stringify(res.tempFilePaths));
    }
});

但是用着比较麻烦，图片可以多选，但是视频只能单选。所以推荐使用h5+里面的：
plus.gallery.pick(successCB, errorCB, options);
可以多选视频，也可以多选照片

[JavaScript] 纯文本查看 复制代码

galleryImgs(){
        // 从相册中选择图片
        console.log("从相册中选择多张图片:");
    plus.gallery.pick( function(e){
            for(var i in e.files){
                    console.log(e.files);
            }
    }, function ( e ) {
            console.log( "取消选择图片" );
    },{filter:"image",multiple:true});
}

选中以后都会返回图片和视频的平台绝对路径。

需要使用h5+里面的：

plus.io.convertAbsoluteFileSystem(url)；

可以将平台绝对路径转换成本地URL路径。

在使用uniapp自带的uni.uploadFile(OBJECT)上传文件，已经封装好的，比较方便。

详情看官网：https://uniapp.dcloud.io/api/request/network-file

接下来是非图像非视频的上传方式，这方面难就难在不知道如何去获取本地文件的路径。所以只能借用h5端的方式，直接上传文件，但是只能单选上传。

使用h5+的plus.webview.create()，新建一个webview的页面

可以设置这个页面的形状和大小，做成按钮的形状

App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下

详情可以看官网https://uniapp.dcloud.io/component/web-view

下面新建了一个透明矩形页面

[JavaScript] 纯文本查看 复制代码

                this.wv = plus.webview.create('hybrid/html/index.html', '', {
                                'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
                                top: '40%',
                                left: '480px',
                                height: '160px',
                                width: '260px',
                                background: 'transparent'
                        });
                        this.wv.loadURL('/hybrid/html/index.html');

并在 uni-app 项目根目录->hybrid->html 文件夹下，新建一个index.html文件，在其中写一个

[JavaScript] 纯文本查看 复制代码

<input type="file" accept="">
//accept是用来规定选择文件的类型的

其中app端不支持multiple，这就是只能单选上传的原因

设置input的样式铺满整个webview页面，这样就做好了一个“选择文件按钮”
接下来继续在index.html文件里输入下面的js代码

[JavaScript] 纯文本查看 复制代码

<script type="text/javascript">
                        let fileDom = document.querySelector(".file");
                        //获得dom元素
                        fileDom.addEventListener('change', (event) => {
                        //监听input变化
                                let file = fileDom.files[0];
                        //获得input选择提交的文件
                                var xhr = new XMLHttpRequest();
                        
                                var formData = new FormData();
                                formData.append('fileDom', file);
                                //将文件加入到formdata中
                                xhr.open('POST', 'http://192.168.0.125:64000//api/doc/DocUploadForApp');
                                //正常请求
                                xhr.setRequestHeader('', '');
                                //自定义header
                                xhr.upload.addEventListener("progress", function(event) {
                                        if (event.lengthComputable) {
                                                let percent = Math.ceil(event.loaded * 100 / event.total) + "%";
                                                //实时监听文件上传的进度
                                                
                                                //可以使用plus.storage.setItem()本地缓存来和vue页面进行通讯
                                                
                                        }
                                }, false);
                                xhr.send(formData);
                                xhr.onreadystatechange = function() {

                                        if (xhr.readyState == 4 && xhr.status == 200) {
                                                console.log(xhr.responseText);
                                                
                                                location.href = 'index.html';
                   //加载完成以后，调用一个页面自跳转，并且可以通过在vue界面调用this.wv.overrideUrlLoading()来截取并阻止这个跳转，达到在vue界面知道上传完成的情况
                                        } else {
                                                console.log(xhr.statusText);
                                        }
                                }
                        }, false);
                </script>

this.wv.overrideUrlLoading()的使用详情可以看官网http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.overrideUrlLoading

这样app的视频、图片和非图片、非视频的文件上传就可以完成了

————————————————

版权声明：本文为CSDN博主「GraySheep」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_40393313/article/details/108005357

白优星辰

6666666666666666666666666