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

news/2024/5/18 22:03:25

看了太多人的文档,拆开,组合,终于成功完成了这个写法,从上周五,到今天周三,共花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.mrgr.cn/p/16531554

相关文章

风靡朋友圈的妙鸭相机,到底用了哪些底层技术?

不知道大家近期的朋友圈有没有被和海马体、天真蓝如出一辙的AI写真刷屏&#xff01; 这些面若桃花、精致到头发丝、光影充满氛围感的写真都是一款叫“妙鸭相机”的小程序生成的&#xff01;只要9.9&#xff0c;就能体验999写真&#xff01; 虽然只要9.9&#xff0c;但生成的照片…

opencv-24 图像几何变换03-仿射-cv2.warpAffine()

什么是仿射&#xff1f; 仿射变换是指图像可以通过一系列的几何变换来实现平移、旋转等多种操作。该变换能够 保持图像的平直性和平行性。平直性是指图像经过仿射变换后&#xff0c;直线仍然是直线&#xff1b;平行性是指 图像在完成仿射变换后&#xff0c;平行线仍然是平行线。…

海康摄像头开发笔记(一):连接防爆摄像头、配置摄像头网段、设置rtsp码流、播放rtsp流、获取rtsp流、调优rtsp流播放延迟以及录像存储

文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/131679108 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结…

服务器 Docker Alist挂载到本地磁盘(Mac版)夸克网盘

1.服务器下载alist 默认有docker环境 docker pull xhofe/alist2.生成容器 -v /home/alist:/opt/alist/data 这段意思是alist中的数据映射到docker 主机的文件夹&#xff0c;/home/alist就是我主机的文件夹&#xff0c;这个文件夹必须先创建 docker run -d --restartalways…

【Python】数据分析+数据挖掘——探索Pandas中的数据筛选

1. 前言 当涉及数据处理和分析时&#xff0c;Pandas是Python编程语言中最强大、灵活且广泛使用的工具之一。Pandas提供了丰富的功能和方法&#xff0c;使得数据的选择、筛选和处理变得简单而高效。在本博客中&#xff0c;我们将重点介绍Pandas中数据筛选的关键知识点&#xff…

ChatGPT结合知识图谱构建医疗问答应用 (一) - 构建知识图谱

一、ChatGPT结合知识图谱 在本专栏的前面文章中构建 ChatGPT 本地知识库问答应用&#xff0c;都是基于词向量检索 Embedding 嵌入的方式实现的&#xff0c;在传统的问答领域中&#xff0c;一般知识源采用知识图谱来进行构建&#xff0c;但基于知识图谱的问答对于自然语言的处理…

Nginx配置WebSocket反向代理

1、WebSocket协议 ​ WebSocket协议相比较于HTTP协议成功握手后可以多次进行通讯&#xff0c;直到连接被关闭。但是WebSocket中的握手和HTTP中的握手兼容&#xff0c;它使用HTTP中的Upgrade协议头将连接从HTTP升级到WebSocket。这使得WebSocket程序可以更容易的使用现已存在的…

深度学习——LSTM解决分类问题

RNN基本介绍 概述 循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;是一种深度学习模型&#xff0c;主要用于处理序列数据&#xff0c;如文本、语音、时间序列等具有时序关系的数据。 核心思想 RNN的关键思想是引入了循环结构&#xff0c;允许…

记一次安装nvm切换node.js版本实例详解

最后效果如下&#xff1a; 背景&#xff1a;由于我以前安装过node.js&#xff0c;后续想安装nvm将node.js管理起来。 问题&#xff1a;nvm-use命令行运行成功&#xff0c;但是nvm-list显示并没有成功。 原因&#xff1a;因为安装过node.js&#xff0c;所以原先的node.js不收n…

CloudStudio搭建Next框架博客_抛开电脑性能在云端编程(沉浸式体验)

文章目录 ⭐前言⭐进入cloud studio工作区指引&#x1f496; 注册coding账号&#x1f496; 选择cloud studio&#x1f496; cloud studio选择next.js&#x1f496; 安装react的ui框架&#xff08;tDesign&#xff09;&#x1f496; 安装axios&#x1f496; 代理请求跨域&#x…

2.获取DOM元素

获取DOM元素就是利用JS选择页面中的标签元素 2.1 根据CSS选择器来获取DOM元素(重点) 2.1.1选择匹配的第一个元素 语法: document.querySelector( css选择器 )参数: 包含一个或多个有效的CSS选择器 字符串 返回值: CSS选择器匹配的第一个元素&#xff0c;一个HTMLElement对象…

Data Structure, Algorithm,and Applications in C++

在学习这本书进阶内容之前&#xff0c;我们可以跟着它的第一章部分再巩固和复习。本书由Sartaj Sahni撰写&#xff0c;由王立柱和刘志红翻译。全书通俗易懂&#xff0c;内容丰富&#xff0c;是巩固C内容的不二选择。希望本文对各位有所帮助。 目录 1.函数与参数 1.1.传值参数…

【Linux】用户相关内容

如果命令ll 出现以上信息&#xff0c;UID为具体的数字&#xff0c;代表之前UID为502的用户被删除了。 更改目录或文件所属用户和所属组 在Linux中&#xff0c;创建一个文件时&#xff0c;该文件的拥有者都是创建该文件的用户。 更改所属用户 chown 用户名 文件名/目录名 更…

:is()、:where() 和 :has() 伪元素

:is()、:where() 和 :has() 伪元素是 CSS 中用于样式化元素的非常强大的工具。它们是在 CSS 选择器 Level 4 规范中引入的。它们允许我们将样式应用于符合特定条件的任何元素&#xff0c;例如元素的类型、元素的位置和元素的后代。 :is() :is() - CSS&#xff1a;层叠样式表 …

Python 进阶(三):正则表达式(re 模块)

❤️ 博客主页&#xff1a;水滴技术 &#x1f338; 订阅专栏&#xff1a;Python 入门核心技术 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; 文章目录 1. 导入re模块2. re模块中的常用函数2.1 re.search()2.2 re.findall()2.3 re.sub()2.4…

开源快速开发平台:做好数据管理,实现流程化办公!

做好数据管理&#xff0c;可以提升企业的办公协作效率&#xff0c;实现数字化转型。开源快速开发平台是深受企业喜爱的低代码开发平台&#xff0c;拥有多项典型功能&#xff0c;是可以打造自主可控快速开发平台&#xff0c;实现一对一框架定制的软件平台。在快节奏的社会中&…

游戏APP开发:创新设计的秘诀

在游戏 APP开发中&#xff0c;创新设计是游戏开发公司的一大追求&#xff0c;为了可以为用户带来更好的游戏体验&#xff0c;这就需要对游戏 APP开发进行创新设计。那么&#xff0c;游戏 APP开发中的创新设计是什么呢&#xff1f;接下来&#xff0c;我们就一起来看看吧。 想要…

基于深度学习的高精度80类动物目标检测系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于深度学习的高精度80类动物目标检测识别系统可用于日常生活中或野外来检测与定位80类动物目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的80类动物目标检测识别&#xff0c;另外支持结果可视化与图片或视频检测结果的导出。本系统采用YO…

Spring MVC异常处理【单个控制异常处理器、全局异常处理器、自定义异常处理器】

目录 一、单个控制器异常处理 1.1 控制器方法 1.2 编写出错页面 1.3 测试结果 二、全局异常处理 2.1 一个有异常的控制器类 2.2 全局异常处理器类 2.3 测试结果 三、自定义异常处理器 3.1 自定义异常处理器 3.2 测试结果 往期专栏&文章相关导读 1. Maven系列…

Linux - make/Makefifile

0.背景 会不会写makefile&#xff0c;从一个侧面说明了一个人是否具备完成大型工程的能力 一个工程中的源文件不计数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;makefile定义了一系列的规则来指定&#xff0c;哪些文件需要先编译&#xff0c;哪些文件需…