微信小程序上传本地文件

由于微信小程序只提供了wx.chooseImage(选择图片)与wx.chooseMessageFile(选择消息列表文件)这两个API,当我们想要上传本地文件的时候,只有通过在小程序嵌入H5页面进行本地文件上传

H5界面展示

小程序界面

  • template
<web-view :src="url" @message="handlePostMessage"></web-view>
  • script
复制代码
data() {
  return {
    url:'https://xxx.xxx.xxx/xxx?token='+xxx
  }
},
methods: {
  handlePostMessage(e){
    console.log('e----',e.detail.data[0].res)
    //对H5返回的数据做处理
  }
}
复制代码

H5界面

复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script
            type="text/javascript"
            src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"
        ></script>
        <script
            type="text/javascript"
            src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"
        ></script>
        <style>
            .btn_group {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
            }
            .choose_container {
                flex: 1;
                padding: 10px 15px;
                border: 1px solid #e4e4e4;
                border-radius: 6px;
                background-color: #fff;
                color: black;
                margin-right: 20px;
            }
            .upload_container {
                flex: 1;
                padding: 10px 15px;
                border: 1px solid #e4e4e4;
                border-radius: 6px;
                background-color: #01b377;
                color: white;
            }
            input[type='file'] {
                display: none;
            }
            #list_container {
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box_container">
            <input type="file" name="upfile" id="upfile" />
            <div class="btn_group">
                <button class="choose_container">选择文件</button>
                <button class="upload_container">上传文件</button>
            </div>
            <div id="list_container"></div>
        </div>
        <script>
            var token = window.location.search.split('=')[1];
            // 文件上传后缀
            var suffixList = [
                'doc',
                'docx',
                'xls',
                'xlsx',
                'ppt',
                'pptx',
                'pdf',
            ];
            // 选择文件
            var chooseBtn =document.getElementsByClassName('choose_container')[0];
            var upIpt = document.getElementById('upfile');
            var list = document.getElementById('list_container');
            chooseBtn.addEventListener('click', function () {
                upIpt.click();
            });
            var upFileList;
            upIpt.addEventListener('change', function (res) {
                upFileList = res.target.files;
                if (res.target.files.length > 0) {
                    list.innerText = res.target.files[0].name;
                }
            });
            // 上传文件
            var upBtn = document.getElementsByClassName('upload_container')[0];
            upBtn.addEventListener('click', function () {
                let fileName = upFileList[0].name;
                let lastIndexOf = fileName.lastIndexOf('.') + 1;
                //获取文件的后缀名 txt|...
                let suffix = fileName.substring(lastIndexOf);
                if (suffixList.includes(suffix)) {
                    let fd = new FormData();
                    fd.append('file', upFileList[0]);
                    fetch('xxx', {
                        method: 'POST',
                        body: fd,
                        headers: {
                            Authorization: 'Bearer ' + token,
                        },
                    })
                        .then((response) => response.json())
                        .then((res) => {
                            wx.miniProgram.postMessage({
                                data: {
                                    res: res,
                                },
                            });
                            wx.miniProgram.navigateBack({ delta: 1 });
                        })
                        .catch((err) => {
                            console.log('fetch error', err);
                        });
                } else {
                    console.log('文件上传格式不符合要求');
                }
            });
        </script>
    </body>
</html>
复制代码

注意事项

  • 直接使用fetch时,注意要对返回的数据进行解析
  • 需要在小程序的业务白名单中加入部署的H5地址
posted @   南无、  阅读(4529)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示