背景

2021.4 党建助手

党建助手项目涉及调取手机内部文件进行上传
经自己努力——未果
经一位老学长和一位学长帮助—— 未果

最后无奈舍弃（因为我大三课程又多又难+菜），解决方案是只适配H5，因为当时这个项目是用来做公众号的，未来可能会转小程序。

2021.7 小云通信

小云通信在党建助手基础上升级。自然而然就又涉及到了调取手机内部文件上传，同学A做这个模块，他调研了三天，跟我交流后决定找项目负责人学长B沟通换方案。
最后，又是设计从手机内部选择文件，改用微信提供的chooseMessageFile，从微信聊天框进行选取文件上传。

2021.11 灵鹿推

嗯，对没错。这个项目里又是我又又又碰到了这个需求。不过这次，我不打算放弃了

解决过程

首先看官方社区

大家可以看到，官方并没有提供这个接口。但是我在另外一篇问答中看到了，官方提到，可以用webView来实现这个功能

不过要注意

解决方法

1.新建vue文件

写 web-view 标签，官方提供了 @message方法用来网页向应用通信时接收消息

2.编写html文件

<body><div><div class="resunme"><li class="upImg"></li><li>支持5M内的word/pdf，500K以内的jpg/png文件</li></div><div class="resume-look-bottom"><div style="width: 92%;"><!-- padding-bottom: 34px; --><!-- <button class="cu-btn bg-grey lg">玄灰</button> --><!-- style="visibility: none;" --><input type="file" id="file" style="display: none;" /><!-- @click="toImport()" --><button id="upload" class="cu-btn">重新导入</button></div></div></div>
</body>

// 选择文件
const Upload = document.getElementById('upload');
Upload.onclick = () => {oFile.click();
};
// 监听文件上传
const oFile = document.getElementById('file');
oFile.onchange = () => {// console.log(oFile.files[0],oFile.files[0].arrayBuffer, '123123')const myData = {filename: oFile.files[0].name.split('.')[0],size: oFile.files[0].size,name: oFile.files[0].name,lastModified: oFile.files[0].lastModified,type: oFile.files[0].type,webkitRelativePath: oFile.files[0].webkitRelativePath};// let sendData = JSON.stringify(fd)// console.log(sendData, 'sendData')// 转base64fileToBase64(oFile.files[0]).then(res => {myData['fileBase'] = resconsole.log(myData, 'myDataee')webUni.postMessage({  data: myData});  })setTimeout(() => {webUni.navigateBack();},500)

要注意这里有个坑

我使用官方提供的 uni.postMessage 时，是没有效果的。
此时更改源码部分

  var E = "undefined" != typeof webUni ? webUni : {};if (!E.navigateTo)for (var b in l) t(l, b) && (E[b] = l[b]);return E.webView = l, E

然后使用 webUni，实测可行。

3.在@message事件方法

methods: {handleMessage(data) {console.log('返回数据：', data);let res = { ...data.detail.data[0] }// uni.navigateBack({ delta: 1 });// 跳转上传页}
}

至此，就可以看到我们完成了使用微信小程序实现调取手机内部文件上传

效果

这是web-view 的内嵌h5页面

历时八个月的uniapp微信小程序上传手机内部文件相关推荐

微信小程序上传图像或者文件到阿里云oss
在微信小程序中新建一个文件夹upFile,分别有三个js文件:base64.js.crypto.js.alioss.js base64.js文件内容,在alioss.js中被引用 var Base64 ...
微信小程序上传和下载文件
博客简介本篇博客介绍微信小程序如何将文件上传到服务器,如何从服务器下载文件,主要步骤如下: 搭建服务器 uploadFile上传文件 downloadFile下载文件搭建服务器既然想要将文件上传 ...
uni-app开发微信小程序上传提示以下文件没有被打包上传
解决方案: 1. 将根目录static下的font文件转移到其他的文件夹项目,比如我在根目录建了个style目录. 2.将font文件夹及里面的文件拷贝过去@import url('/style/ic ...
微信小程序上传多张图片，上传文件pdf等
wx.getFileSystemManager().readFileSync同步循环数组是可以拿到值的 wx.getFileSystemManager().readFile异步,但是加了这个就一直是空 ...
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
微信小程序上传头像和昵称持久化保存
微信小程序上传头像和昵称持久化保存 1. 持久化步骤因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url.所以非常有必要把这个url ...
小程序 php转excel,做微信小程序上传数据数据格式？-微信上传数据生成excle
做微信小程序上传数据数据格式? 建议找人专门制作设计好,专业的事情交给专业的人做,自己浪费时间还不一定能搞好如何把微信里的excel传到qq上 1.在手机中先箭头所示的"微信" ...
微信小程序上传文件到阿里OSS教程
前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名上传文件访问域名这里我们要在小程序后台配置上传域名(上面的域名是我 ...
微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...

历时八个月的uniapp微信小程序上传手机内部文件

背景