uniapp多格式文件选择(APP,H5)

uniapp多格式文件选择(APP,H5)

  • 背景
  • 实现
    • 代码实现
    • 运行结果
    • 注意事项
  • 尾巴

背景

从手机选择文件进行上传是移动端很常见的需求,在原生开发时由于平台专一性很容易实现。但是用uniapp开发官方提供的API在APP平台只能选择图片和视频,选择其他格式的File也只有H5平台提供了相关API。虽然通过NativeJs也能实现选择多格式文件,但是需要对原生开发有一定的了解,而且不太稳定。所以本文提供一个能抹平平台差异,并且通用的方式来选择手机端的多格式文件,但是只限于APP和H5平台。先上个Android端的效果图:

在这里插入图片描述

实现

思路是通过renderjs来实现,通过在renderjs中创建一个input为file类型的dom元素,然后手动触发dom的click方法,则会弹出文件选择框(如上)。

代码实现

从上截图可以知道,页面上就一个按钮,通过点击按钮触发renderjs中的函数,然后执行dom相关操作,代码相对简单,这里就直接上代码:

<template><view class="content"><button @click="fileChoose">文件选择</button><view :fileData="fileData" :change:fileData="renderJS.receiveFileData"/></view>
</template><script>export default {data() {return {fileData: ''}},onLoad() {},methods: {fileChoose(){this.fileData = 'test'//这里将fileData定时置空,否则下次点击不会触发renderjs函数setTimeout(()=> {this.fileData = ''},1000)},//从renderjs中触发的函数回调receiveRenderFile(result){console.log(result)}}}
</script>
<script module="renderJS" lang="renderjs">export default {data() {return {}},mounted() {console.log('1111111111mounted')},methods: {receiveFileData(newValue, oldValue, ownerVm, vm){if(!newValue){return}this.createFileInputDom(ownerVm)},//手动创建domcreateFileInputDom(ownerVm){let fileInput = document.createElement('input')//设置input为file类型fileInput.setAttribute('type','file')//设置file格式为素有fileInput.setAttribute('accept','*')//手动触发dom点击事件fileInput.click()fileInput.addEventListener('change', e => {//获取file对象let file = e.target.files[0]//转化为URL路径const filePath = URL.createObjectURL(file)//将文件名和文件路径回调到视图层ownerVm.callMethod('receiveRenderFile',{name: file.name,filePath: filePath})//事件回调之后销毁domfileInput = null})}}}
</script>
<style>
</style>

运行结果

我们这里选择手机一个为工作助手的apk文件
在这里插入图片描述

receiveRenderFile函数中打印如下:

{"name": "工作助手.apk","filePath": "blob:file:///07f057dc-b51b-445c-9fb8-8ec9c64075c9"
}

拿到名字和路径之后我们就可以使用uni.uploadFile相关API进行上传。

注意事项

由于本人使用的是Android手机,苹果手机上未尝试过这种方式,iOS平台不能保证有用(理论上来说应该是支持的)。

尾巴

今天的文章就到这里了,希望能给大家帮助,如果喜欢我的文章,欢迎给我点赞,评论,关注,谢谢大家!

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

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

相关文章

【网站项目】基于SSM的200日用品网站

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

2023量子科技十大用例 | 光子盒年度系列

随着量子科技的不断突破&#xff0c;量子计算、量子通信、量子测量等应用场景逐渐向纵深拓展&#xff0c;量子产业呈现出较好的发展势头。 量子计算的发展比以往任何时候都更加迅速&#xff0c;这提醒我们&#xff0c;这项看似‘高冷’的前沿科技&#xff0c;已悄然应用于不少领…

Kubernetes k8s

Kubernetes k8s 一个开源的容器编排引擎&#xff0c;用来对容器化应用进行自动化部署、 扩缩和管理。 从架构设计层面&#xff0c;k8s能很好的解决可用性&#xff0c;伸缩性&#xff1b;从部署运维层面&#xff0c;服务部署&#xff0c;服务监控&#xff0c;应用扩容和故障处…

Spring AOP实现

Spring AOP实现 AOP概述什么是AOP什么是Spring AOP Spring AOP快速入门引入依赖实现计时器 Spring AOP详解Spring AOP核心概念切点(Pointcut)连接点(Join Point)通知(Advice)切面(Aspect) 通知类型注意事项 PointCut多个切面切面优先级 Order切点表达式execution表达式annotati…

Golang数据结构性能优化实践

仅仅通过对struct字段重新排序&#xff0c;优化内存对齐方式&#xff0c;就可以获得明显的内存和执行效率提升。原文: How to Speed Up Your Struct in Golang Mike Pexels 如果你有Golang开发经验&#xff0c;一定定义过struct类型。 但可能你不知道&#xff0c;通过简单的重新…

电池-电量监测基础知识

一、为何要进行电池电量监测 不知各位有没有想过为何现在手机电池和笔记本电脑电池不容易鼓包了&#xff1f;十年前还经常出现的电池鼓包最近像是消失了一样&#xff0c;其实是因为随着电量监测技术的发展&#xff0c;哪怕是最基本的电子设备也有电池侧和产品侧至少两级电量监测…

Mysql 插入数据

1 为表的所有字段插入数据 使用基本的INSERT语句插入数据要求指定表名称和插入到新记录中的值。基本语法格式为&#xff1a; INSERT INTO table_name (column_list) VALUES (value_list); 使用INSERT插入数据时&#xff0c;允许列名称列表column_list为空&#xff0c;此时&…

基于JavaWeb开发的药房信息管理系统【附源码】

基于JavaWeb开发的药房信息管理系统【附源码】 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统 &#…

【Time Series】获取股票数据代码实战

一、简介 "时间序列金融"是一个很有"钱"景的话题&#xff0c;若想开始DeepLearningTimeSeriesStock&#xff0c;首先得拿到数据。本文提供了一种股票数据获取的源代码。 二、代码 1、首先&#xff0c;将要获取数据的股票按照图中xlsx的格式整理&#xff0…

力扣hot100 柱状图中最大的矩形 单调栈

Problem: 84. 柱状图中最大的矩形 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 参考地址 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( n ) O(n) O(n) Code class Solution {public static int largestRectangleArea(int[] height){Stack&l…

Windows Server 2025 来了

微软于2024年1月26日发布了Windows Server 2025的预览版更新&#xff0c;Windows Server 2025是由您的反馈和您希望拥抱混合、自适应云的愿望驱动的。这是2024年度的首个预览版&#xff0c;版本号为Build 26040。 在Windows Server 2025中&#xff0c;微软引入了多项新安全机制…

旧物回收小程序开发:创新与可持续发展的交汇点

随着社会的发展和人们生活水平的提高&#xff0c;物品的更新换代速度越来越快&#xff0c;这导致了大量的旧物被闲置或丢弃。为了解决这个问题&#xff0c;旧物回收成为了重要的环保行动。而随着移动互联网的普及&#xff0c;旧物回收小程序的开发也成为了新的趋势。本文将探讨…