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

这篇具有很好参考价值的文章主要介绍了微信小程序上传手机内部文件,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各位大神共享。文章来源地址https://www.toymoban.com/news/detail-609108.html

到了这里,关于微信小程序上传手机内部文件,PC文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序中选中手机相册图片上传到服务器的方法

    思路: 实现图片上传我们需要使用 chooseImg 和 uploadFile 这两个api。 1. 微信小程序中的chooseImg是一个API,用于在用户相册或相机中选择图片上传。它可以让用户在小程序中选择上传图片,以便进行下一步操作,例如将其发送给朋友或将其上传到服务器。 2. 使用chooseImg API,您可

    2024年04月09日
    浏览(28)
  • 阿里云OSS-小程序文件直传(支持微信小程序、H5、PC端web使用)

    支持微信小程序、H5、PC端web使用,整套文件进行封装统一使用 开发背景:做类似发布朋友圈的功能需求,由于后端对发布功能只提供一个接口,文字、状态、文件上传统一一个接口上传,且对文件上传方面做的接口存在诸多问题(人已经整麻了),包括各种数据结构的转换

    2024年02月07日
    浏览(31)
  • 微信小程序是如何上传文件以及下载文件

    微信小程序可以使用wx.uploadFile() API来上传文件,使用wx.downloadFile() API来下载文件。 上传文件的步骤如下: 1、创建一个选择文件的按钮。 2、用户点击按钮后,调用wx.chooseImage()方法来选择文件。 3、调用wx.uploadFile()方法上传文件。 示例代码如下: 下载文件的步骤如下: 1、创

    2024年02月11日
    浏览(37)
  • uniApp、微信小程序上传单个文件及多个文件

    使用官方api - uni.uploadFile 这是单个文件上传写法 这是上传多个文件写法 由于没有多个上传文件的方法,目前只能通过遍历的方式来进行多文件上传

    2024年04月16日
    浏览(31)
  • 【小程序教程】微信小程序之Upload文件上传

    一、概述 微信小程序是一种基于移动互联网技术的轻应用,提供了许多内置的功能和API,可以方便地实现各种应用开发。其中,文件上传是一项非常常见的功能,小程序提供了upload API用于文件上传。今天,我们就来探讨一下如何使用微信小程序的upload API进行文件上传。 二、

    2024年02月05日
    浏览(27)
  • 微信小程序云存储(文件上传到云端)

      我们直到,云开发控制台更多的是对项目中的初始文件的操作管理,例如项目的Logo图片可以通过云开发控制台提起上传到云端。项目在执行的过程中也会涉及文件的操作,例如用户上传图片的操作,这时就需要用到云开发存储API。   小程序云开发提供了一系列存储操

    2024年02月09日
    浏览(27)
  • 微信小程序上传文件及图片(可以预览)

    最近在写小程序项目,碰到了一个需求,需要用户可以上传各种类型的文件和图片,展示在页面上,并且点击还可以进行预览,就找了找微信小程序官网,写了一个例子,分享一下 直接看代码: wxml: wxss: js: 有问题和建议欢迎大家留言

    2024年02月12日
    浏览(33)
  • 微信小程序文件上传无响应解决方法

    今天更新了下小程序,发现文件上传无法拉起拍照或者选择照片,点击上传按钮,没有反应,也没有任何报错,顿时就一顿蒙蔽。最后灵机一动想起了,微信最近更新了隐私协议,文件上传需要用到 这些接口,而这些接口都是需要先在隐私协议中声明,才可以使用的,最终我

    2024年02月06日
    浏览(65)
  • uniapp微信小程序实现大文件上传 分片上传 进度条

    一、安装   二、页面引入  三、实现功能(重要)         1.获取图片的路径         2.设置分片的大小         3.将数据放入 四、实现上传进度条 全部函数js 五、修改npm的源码,处理请求源码中请求所携带的参数问题,以及报错处理(重要) 修改npm后的源码。

    2024年02月03日
    浏览(33)
  • 微信小程序文件直接上传阿里云OSS

    第一步 配置Bucket跨域访问 第二步 微信小程序配置域名白名单 以上两步,请参考阿里云官网, 如何在微信小程序环境下将文件上传到OSS_对象存储 OSS-阿里云 https://help.aliyun.com/document_detail/92883.html 安装依赖 wx-oss-upload 然后创建自己的上传方法,引用 wx-oss-upload  然后在选取文

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包