h5端的可以直接使用
<input type="file" accept="" multiple>
//accept是用来规定选择文件的类型的,multiple可以用来多选
选到了文件就可以使用formdata添加文件进行上传
接下来是app端的
图片类型的自带的uni.chooseImage(OBJECT)就可以进行多选了
详情看官网地址:https://uniapp.dcloud.io/api/media/image
下面也是官网的demo
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);
可以多选视频,也可以多选照片
galleryImgs(){
// 从相册中选择图片
console.log("从相册中选择多张图片:");
plus.gallery.pick( function(e){
for(var i in e.files){
console.log(e.files[i]);
}
}, 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
下面新建了一个透明矩形页面
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 type="file" accept="">
//accept是用来规定选择文件的类型的
其中app端不支持multiple,这就是只能单选上传的原因
设置input的样式铺满整个webview页面,这样就做好了一个“选择文件按钮”
接下来继续在index.html文件里下入下面的js代码
<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的视频、图片和非图片、非视频的文件上传就可以完成了
微信端还没试过,但是应该和app端的差不多