关于小程序PC版本上传文件的问题

2024-09-21

现在有一个需求,要在PC微信上打开小程序,然后在小程序里面上传文件。

选择文件第一步需要拉起文件选择器选择文件,wx.chooseMessageFile 再PC小程序上会报错。

解决方案:

用web-view打开一个html文件,然后html里面让用户选择文件进行上传。

<div class="f-bpx" style="margin-top: 40px">
     <div class="s-box1">点击上传最终合同</div>
     <input id="uploadInput" type="file" name="upload" accept="docx,xlsx,xls" class="s-box2" />
</div>
document.querySelector("#uploadInput").addEventListener("change", function () {
    var fileInput = document.getElementById("uploadInput");
    var selectedFile = fileInput.files[0];
    //selectedFile  就是选择的文件
}

然后获取文件之后可以用axios 上传上去。将这个文件放入服务器,将地址填入web-view的src中

如果要将小程序的token带入,则通过url传值

<web-view :src="https://xxxx.com/index.html?token=123456789" @message="handlePostMessage"></web-view>

然后浏览器中获取

 function getUrlParam(name) {
     const urlParams = new URLSearchParams(window.location.search);
     return urlParams.get(name);
 }
getUrlParam(token) //123456789  然后可以把token放入axios的请求头中

如何将结果通知到小程序

https://ask.dcloud.net.cn/article/id-35083

PREV
集成nest-winston日志模块
NEXT
8 个解决移动端1px 边框困境的方案