uniapp进行文件的选取和上传

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端的差不多

你可能感兴趣的:(vue.js)