背景

从手机选择文件进行上传是移动端很常见的需求，在原生开发时由于平台专一性很容易实现。但是用uniapp开发官方提供的API在APP平台只能选择图片和视频，选择其他格式的File也只有H5平台提供了相关API。虽然通过NativeJs也能实现选择多格式文件，但是需要对原生开发有一定的了解，而且不太稳定。所以本文提供一个能抹平平台差异，并且通用的方式来选择手机端的多格式文件，但是只限于APP和H5平台。先上个Android端的效果图：

实现

思路是通过renderjs来实现，通过在renderjs中创建一个input为file类型的dom元素，然后手动触发dom的click方法，则会弹出文件选择框（如上）。

代码实现

从上截图可以知道，页面上就一个按钮，通过点击按钮触发renderjs中的函数，然后执行dom相关操作，代码相对简单，这里就直接上代码：

<template><view class="content"><button @click="fileChoose">文件选择</button><view :fileData="fileData" :change:fileData="renderJS.receiveFileData"/></view>
</template><script>export default {data() {return {fileData: ''}},onLoad() {},methods: {fileChoose(){this.fileData = 'test'//这里将fileData定时置空，否则下次点击不会触发renderjs函数setTimeout(()=> {this.fileData = ''},1000)},//从renderjs中触发的函数回调receiveRenderFile(result){console.log(result)}}}
</script>
<script module="renderJS" lang="renderjs">export default {data() {return {}},mounted() {console.log('1111111111mounted')},methods: {receiveFileData(newValue, oldValue, ownerVm, vm){if(!newValue){return}this.createFileInputDom(ownerVm)},//手动创建domcreateFileInputDom(ownerVm){let fileInput = document.createElement('input')//设置input为file类型fileInput.setAttribute('type','file')//设置file格式为素有fileInput.setAttribute('accept','*')//手动触发dom点击事件fileInput.click()fileInput.addEventListener('change', e => {//获取file对象let file = e.target.files[0]//转化为URL路径const filePath = URL.createObjectURL(file)//将文件名和文件路径回调到视图层ownerVm.callMethod('receiveRenderFile',{name: file.name,filePath: filePath})//事件回调之后销毁domfileInput = null})}}}
</script>
<style>
</style>

运行结果

我们这里选择手机一个为工作助手的apk文件

receiveRenderFile函数中打印如下：

{"name": "工作助手.apk","filePath": "blob:file:///07f057dc-b51b-445c-9fb8-8ec9c64075c9"
}

拿到名字和路径之后我们就可以使用uni.uploadFile相关API进行上传。

注意事项

由于本人使用的是Android手机，苹果手机上未尝试过这种方式，iOS平台不能保证有用(理论上来说应该是支持的)。

尾巴

今天的文章就到这里了，希望能给大家帮助，如果喜欢我的文章，欢迎给我点赞，评论，关注，谢谢大家！