uniappH5端原生DOM实现除图片外，其他文件的上传

ForTUp

于 2020-02-27 16:38:07 发布

阅读量996

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： vue

本文链接：https://blog.csdn.net/qq_38352483/article/details/104539128

本文介绍了在uniapp中如何实现H5端除图片外的其他文件上传，如zip、rar等。官方API不直接支持，但提供了通过web-view组件、input元素、xhr或uni.uploadFile等方法实现。文章主要聚焦于H5端，通过js创建input元素选择文件，并使用xhr进行上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在uniapp中，提供了uni.chooseImage和uni.uploadFile接口,我们很容易的就可以实现图片的上传，还可以预览。不过要上传其他文件，比如zip，rar等文件，官方的api就不支持了。不过官方提供了几种方法供参考来实现传其他文件。

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

下面来介绍下H5端实现其他文件上传：

上传组件

<template>
	<view class="con" ref="fileInput">		
	</view>
</template>



<script>
import {token} from '@/libs/token'
import dokey from '../../common/js/secret/dokey.js'
import md5 from '../../common/js/secret/md5.js'
import {appConfig} from '../../config'
export default {
	props: {
		/**
		 * 模式  asyn异步；await同步
		 */
		reqMode: