138  
查询码:00000905
uni-app 文件上传
作者: 郁冲冲 于 2020年06月16日 发布在分类 / 人防组 / 人防前端 下,并于 2020年06月16日 编辑
uni-app 上传文件

uni-app 选择和上传非图像、视频文件


以下几种方法可供参考:

  • 通用方法:使用 web-view 组件,在 web-view 组件内可以使用 input 元素进行选择,使用表单或者 xhr 上传。
  • App 端:使用 plus.gallery.pick 选择上传(上传可继续使用 uni.uploadFile),如果对 5+API 不熟悉建议使用通用方法。
  • H5 端:使用 js 创建 input 元素进行选择,使用 xhr 上传(或者转 base64、Object-URL 使用 uni.uploadFile 上传),如果对 dom 不熟悉建议使用通用方法。

实例:1. 在hybrid / html /index.html文件中加入代码:通过H5调用本地的文件


<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>文件上传</title>
</head>
<body>
	<input type="file" name="uploadFile" id="uploadFile">
	
	
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	<script>
		$("#uploadFile").change(function(event){
			debugger;
			var file1 = event.target.files[0];
			// console.log(file1)
			var file = {
				lastModified:file1.lastModified,
				lastModifiedDate:file1.lastModifiedDate,
				name:file1.name,
				size:file1.size,
				type:file1.type,
				webkitRelativePath:file1.webkitRelativePath,
			}
			// let maxSize =  5M;
			// maxSize * 1024 * 1024 > 
			if(file.size > 0){
				var reader = new FileReader();
				reader.readAsBinaryString(file1)
				reader.onloadend = function(e){
					// file.fileBinary = reader.result
					uni.navigateTo({
						url: '../notification_management/notification_add?file='+ encodeURIComponent(JSON.stringify(file))
					});
				};
				// console.log(file);
				
			}else{
				uni.showToast({
				    title: '请不要选择空文件',
					icon:'none',
				    duration: 2000
				});
			}
			
		})
	</script>
	
	
	<!-- <script type="text/javascript">
	  var userAgent = navigator.userAgent;
	  if (userAgent.indexOf('AlipayClient') > -1) {
	    // 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。
	    document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
	  } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
	    // QQ 小程序
	    document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
	  } else if (/miniProgram/i.test(userAgent)) {
	    // 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。
	    document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
	  } else if (/toutiaomicroapp/i.test(userAgent)) {
	    // 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序,则无需引用此 JS 文件。
	    document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
	  } else if (/swan/i.test(userAgent)) {
	    // 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。
	    document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
	  }
	  if (!/toutiaomicroapp/i.test(userAgent)) {
	    document.querySelector('.post-message-section').style.visibility = 'visible';
	  }
	</script> -->
	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</body>
</html>

实例:2. 在file.vue页面中内嵌H5页面

<template>
	<web-view src="../../hybrid/html/new_index.html" @onPostMessage="handleMessage"></web-view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods:{
			
		}
	}
</script>

<style>
</style>

 

实例:3. 在界面的上传方法中去跳转到file.vue页面

/**
			 * 选择文件
			 */
			uploadFiles() {
				uni.navigateTo({
					url: "./new_file"
				});
			},

图例:

粘贴图片





 推荐知识

 历史版本

修改日期 修改人 备注
2020-06-16 15:35:57[当前版本] 郁冲冲 1.1.0

 附件

附件类型

PNGPNG

知识分享平台 -V 4.8.7 -wcp