ApiCloud 文件上传

酱香鸭脖

已于 2022-06-22 15:57:44 修改

阅读量904

点赞数

分类专栏： apicloud 文章标签：前端

于 2022-04-24 17:22:10 首次发布

本文链接：https://blog.csdn.net/ssoutlook/article/details/124387258

版权

apicloud 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里通过input 标签设置 type为file 实现上传也好拿数据(最下面有效果图可以先看看满不满足你的需求)

<body>
<!-- 上传文件 -->
		<input id="uploadInput" onchange="handleChangeFile()" type="file" name="file" class="aui-hide" />
</body>

<script type="text/javascript">
    //上传文件触发
	function handleChangeFile() {
			var files = $api.byId('uploadInput').files;
			for (var i = 0; i < files.length; i++) {
				var file = files[i];
				//上传
				uploadFile(file);
		  }
		$api.byId('uploadInput').value = [];
	}
    
    function uploadFile(file) {
			var xhr = new XMLHttpRequest();
			var url ='上传文件的接口地址';
			xhr.open('POST', url, true);
			var formData = new FormData();
			formData.append('file', file);
			formData.append('fname', file.name);
			api.showProgress({title: '正在上传'});
			xhr.send(formData);
			xhr.onreadystatechange = function () {
                api.hideProgress();
				if (xhr.readyState === 4) {
					var resData = JSON.parse(xhr.response);
					if (resData && (resData.id || resData.bizkey)) { 						
						 openToast('文件上传成功');
                         //执行刷新页面的方法 initView();
					} else {
						api.hideProgress();
						openToast('文件上传失败');
					}
				}  
			};
		}

</script>

大概是这个样子的（来源Android(小米)手机截图）

==>