uniapp 进行文件的选取和上传 - 精易论坛

图片类型的自带的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});

}

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

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

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

[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文件，在其中写一个

设置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的视频、图片和非图片、非视频的文件上传就可以完成了