微信小程序上传手机内部文件,PC文件

看了太多人的文档,拆开,组合,终于成功完成了这个写法,从上周五,到今天周三,共花5天解决这个问题。

不需要任何所谓的网络上传(浪费我好几天),不需要跨域,不需要token。

我大方,共享给大家,直接贴代码(调用web-view):

const AdminBiz = require('../../../biz/admin_biz.js');

Page({

    /**

     * 页面的初始数据

     */

    data: {         

            },

     PostMessage(e){    

        console.log(e)      

        //对H5返回的数据做处理

        console.log('接收到的消息:' + JSON.stringify(e.detail.data));     

            },

    /**

     * 生命周期函数--监听页面加载 WXAPl.channelDataPull(“uploadH5Ur”)

     */

    onLoad(options) {   

            

        if (!AdminBiz.isAdmin(this)) return;

      let pageUrl = 'https://www.XXX.com/static/html/win_upload.html'; //页面地址

      //  console.log(AdminBiz.getAdminToken());  //权限

        this.setData({

            src: pageUrl',

        })

    

    },

    /**

     * 生命周期函数--监听页面初次渲染完成 

     */

    onReady() {

    },

    /**

     * 生命周期函数--监听页面显示

     */

    onShow() {

    },

    /**

     * 生命周期函数--监听页面隐藏

     */

    onHide() {

    },

    /**

     * 生命周期函数--监听页面卸载

     */

    onUnload() {

    },

    /**

     * 页面相关事件处理函数--监听用户下拉动作

     */

    onPullDownRefresh() {

    },

    /**

     * 页面上拉触底事件的处理函数

     */

    onReachBottom() {

    },

    /**

     * 用户点击右上角分享

     */

    onShareAppMessage() {

    }

})

--------------------------------------------然后再贴HTML代码:------------------------------------------

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>文件上传</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <!-- uni 的 SDK,必须引用。 -->
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js">
    </script>
    

    <style>
        svg {
            margin-top: -100px;
        }

        div {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .file {
            position: relative;
            display: inline-block;
            background: #007aff;
            padding: 12px 70px;
            overflow: hidden;
            text-decoration: none;
            text-indent: 0;
            border-radius: 20px;
            color: #fff;
            font-size: 13px;
            margin-top: 70px;

        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
    </style>
</head>

  <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>

<script>
    // 选择文件
const Upload = document.getElementById('upload');
Upload.onclick = () => {
    oFile.click();
};
// 监听文件上传
const oFile = document.getElementById('file');
oFile.onchange = () => {
//     console.log(oFile.files[0])
    
    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
    };
//     console.log(myData)
    
    let sendData = JSON.stringify(myData)
//     console.log(sendData, 'sendData')
    
    // 调用方法
fileToBase64(oFile.files[0], (res) => {
  if(res.status) {
        // console.log('file转化成base64成功---',res.data)
        myData['fileBase'] = res

       wx.miniProgram.postMessage({
           data: myData
      });
        wx.miniProgram.navigateBack({ delta: 1 });
        
  } else {
    console.log('file转化base64失败---',res.data)
  }
})

}

// 图片file转base64方法(file文件,回调函数)
 function fileToBase64(file, callback) {
    // 创建FileReader对象(不兼容IE)
    let reader = new FileReader();
    // 将file转为base64 (异步操作)
    reader.readAsDataURL(file); 
    // 转换成功
    reader.onload = () => {
      const response = {
        status: true,
        data: reader.result
      }
      callback(response);
    };
    // 转换失败
    reader.onerror = function () {
      const response = {
        status: false,
        data: reader.error
      }
      callback(response);
    };
  }


</script>


</html>

最后,谢谢CSDN各位大神共享。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/10569.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

人脸检测实战-insightface

目录 简介 一、InsightFace介绍 二、安装 三、快速体验 四、代码实战 1、人脸检测 2、人脸识别 五、代码及示例图片链接 简介 目前github有非常多的人脸识别开源项目&#xff0c;下面列出几个常用的开源项目&#xff1a; 1、deepface 2、CompreFace 3、face_recogn…

【Python 实战】---- 批量识别图片中的文字,存入excel中【使用百度的通用文字识别】

分析 1. 获取信息图片示例 2. 运行实例 3. 运行结果 4. 各个文件的位置 实现 1. 需求分析 识别图片中的文字【采用百度的通用文字识别】;文字筛选,按照分类获取对应的文本;采用 openpyxl 实现将数据存入 excel 中。2. 获取 access_token 获取本地缓存的

网络安全大厂面试题

自我介绍 有没有挖过src&#xff1f; 平时web渗透怎么学的&#xff0c;有实战吗&#xff1f;有过成功发现漏洞的经历吗&#xff1f; 做web渗透时接触过哪些工具 xxe漏洞是什么&#xff1f;ssrf是什么&#xff1f; 打ctf的时候负责什么方向的题 为什么要搞信息安全&#xff0c;对…

数据结构之顺序表

一、概念及结构 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构&#xff0c;一般情况下采用数组存 储。在数组上完成数据的增删查改。 顺序表一般可以分为&#xff1a; 1. 静态顺序表&#xff1a;使用定长数组存储元素。 2. 动态顺序表&#xff1a;使用动…

基于粒子群优化算法(PSO)的Matlab、Python、Java、C++四种仿真实现(附上多个完整仿真源码)

PSO&#xff08;Particle Swarm Optimization&#xff09;是一种优化算法&#xff0c;它模拟了鸟群或鱼群等动物的集体行为&#xff0c;通过群体智能的方式来解决优化问题。PSO算法最初由Kennedy和Eberhart在1995年提出&#xff0c;近年来得到了广泛的应用。 本文将介绍PSO算法…

django学习笔记(1)

django创建项目 先创建一个文件夹用来放django的项目&#xff0c;我这里是My_Django_it 之后打开到该文件下&#xff0c;并用下面的指令来创建myDjango1项目 D:\>cd My_Django_itD:\My_Django_it>"D:\zzu_it\Django_learn\Scripts\django-admin.exe" startpr…

Websocket协议-http协议-tcp协议区别和相同点

通讯形式 单工通讯-数据只能单向传送一方来发送数据&#xff0c;另一方来接收数据 半双工通讯-数据能双向传送但不能同时双向传送 全双工通讯-数据能够同时双向传送和接受 注&#xff1a;http的通讯方式是分版本 http1.0&#xff1a;单工。因为是短连接&#xff0c;客户端…

malloc(1) 会分配多大的虚拟内存?

malloc() 分配的是虚拟内存。 如果分配后的虚拟内存没有被访问的话&#xff0c;虚拟内存是不会映射到物理内存的&#xff0c;这样就不会占用物理内存了。 只有在访问已分配的虚拟地址空间的时候&#xff0c;操作系统通过查找页表&#xff0c;发现虚拟内存对应的页没有在物理内…

SpringCloud学习—Feign负载均衡

Feign简介 Feign是声明式Web Service客户端&#xff0c;它让微服务之间的调用变得更简单&#xff0c;类似controller调用service。SpringCloud集成了Ribbon和Eureka&#xff0c;可以使用Feigin提供负载均衡的http客户端 只需要创建一个接口&#xff0c;然后添加注解即可。使用…

TEE GP(Global Platform)技术委员会及中国任务小组

TEE之GP(Global Platform)认证汇总 一、TEE GP技术委员会 二、GP中国任务小组 参考&#xff1a; GlobalPlatform Certification - GlobalPlatform

MultipartFile类型接收上传文件报出的UncheckedIOException以及删除tomcat临时文件失败源码探索

1、描述异常背景&#xff1a; 因为需要分析数据&#xff0c;待处理excel文件的数据行数太大&#xff0c;手动太累&#xff0c;花半小时写了一个定制的数据入库工具&#xff0c;改成了通用的&#xff0c;整个项目中的万级别数据都在工具上分析&#xff0c;写SQL进行分析&#x…

selenium IDE 接入jenkins-转载

Selenium-IDE脚本录制,selenium-side-runner自动化测试教程_51CTO博客_selenium ide录制脚本 备忘录

七大设计模式原则

1、开闭原则&#xff08;Open-closed Principle&#xff09; 开闭原则&#xff0c;是面向设计中最基础的设计原则。 一个软件实体类、模块、函数应该对扩展开放、对修改关闭。 强调的是用抽象构建框架&#xff0c;用实现扩展细节。可以提高软件系统的可复用性和可维护性。 实…

HBase 源码编译部署包

1. 版本 Java 版本: 1.8.0_201 HBase 版本: hbase-2.5.5 2.打包 git clone https://github.com/apache/hbase.git cd hbase git checkout branch-2.5 编译整个工程的 tar 包&#xff0c;编译一次 10 分钟左右 mvn clean package assembly:single -DskipTests ll hbase-assemb…

设计模式【行为型】-- 责任链模式

责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许多个对象依次处理同一个请求&#xff0c;形成一条责任链。当客户端提交一个请求时&#xff0c;请求沿着责任链传递&#xff0c;直到有一个处理者能够处理该请求为止。…

对原型、原型链的理解

在 JavaScript 中是使用构造两数来新建一个对象的&#xff0c;每一个构造函数的内部都有一个 prototype 属性&#xff0c;它的属性值是一个对象&#xff0c;这个对象包含了可以由该构造西数的所有实例共享的属性和方法。当使用构造函数新建一个对象后&#xff0c;在这个对象的内…

【《React Hooks实战》——指导你使用hook开发性能优秀可复用性高的React组件】

使用React Hooks后&#xff0c;你很快就会发现&#xff0c;代码变得更具有组织性且更易于维护。React Hooks是旨在为用户提供跨组件的重用功能和共享功能的JavaScript函数。利用React Hooks&#xff0c; 可以将组件分成多个函数、管理状态和副作用&#xff0c;并且不必声明类即…

Python实现单例模式

一、介绍 单例模式是一种常见的设计模式&#xff0c;它保证一个类只能被实例化一次&#xff0c;并提供了一个全局访问点来获取这个唯一的实例。在Python中&#xff0c;可以通过使用装饰器、元类或模块等方式实现单例模式。 二、Python实现单例模式的6种方法 1、使用模块实现…

微软、OpenAI用上“数据永动机” 合成数据是晨曦还是暮光?

微软、OpenAI、Cohere等公司已经开始测试使用合成数据来训练AI模型。Cohere首席执行官Aiden Gomez表示&#xff0c;合成数据可以适用于很多训练场景&#xff0c;只是目前尚未全面推广。 已有的&#xff08;通用&#xff09;数据资源似乎接近效能极限&#xff0c;开发人员认为&a…

DoS攻击

DoS攻击&#xff08;拒绝服务攻击&#xff09; 拒绝服务攻击DoS(Denial of Service)&#xff1a;使系统过于忙碌而不能执行有用的业务并且占尽关键系统资源。 它是基于这样的思想&#xff1a;用数据包淹没本地系统&#xff0c;以打扰或严重阻止捆绑本地的服务响应外来合法的请…