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)
			},
			//手动创建dom
			createFileInputDom(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
					})
					//事件回调之后销毁dom
					fileInput = null
				})
			}
		}
	}
</script>
<style>
</style>

运行结果

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

receiveRenderFile函数中打印如下:

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

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

注意事项

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

尾巴

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言如何理解 c=a,b;?

一、问题 对于表达式 ca,b;和 d(a,b);该如何进⾏理解&#xff1f;它们的值都是怎样的&#xff1f; 二、解答 在C语⾔中&#xff0c;逗号有两个作⽤&#xff0c;⼀是⽤来分隔函数参数&#xff0c;⼆是作为逗号运算符。本题主要考虑的是逗号运算符&#xff0c;根据逗号运算符的规…

第七篇:node中间件详解

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! ​ 目录 &#x1f4d8; 引言&#xff1a; &#…

nacos启动成功,程序连接失败

问题&#xff1a;nacos服务器启动成功后可以访问&#xff0c;但是程序连接却超时 解决&#xff1a;检查端口&#xff0c;2.0以上的版本需要开放的端口一共是三个&#xff01;&#xff01; 8848 9848 9849 找了很久是因为后面两个端口没有开放&#xff0c;原因是因为2.0以上…

控制台的过滤条请求类型被变成下拉选想变成一行

控制台的请求类型被变成下拉选了找到设置---实现----不选Redesign of the filter bar in the Network Panel(重新设计网络面板中的过滤条) 问题如图&#xff1a; 希望是如图&#xff1a; 解决方案:

空间数据分析和空间统计工具库PySAL入门

空间数据分析是指利用地理信息系统(GIS)技术和空间统计学等方法&#xff0c;对空间数据进行处理、分析和可视化&#xff0c;以揭示数据之间的空间关系和趋势性&#xff0c;为决策者提供有效的空间决策支持。空间数据分析已经被广泛运用在城市规划、交通管理、环境保护、农业种植…

Nacos服务注册源码解析

简介&#xff1a;本文将以图文方式详述 Spring Cloud Alibaba 技术体系之 Nacos 服务注册源码解析。 目录 一、Nacos 服务架构 二、Nacos 服务注册流程图&#xff08;源码级别&#xff09; 1. 注册中心核心工作流程 三、Nacos 服务注册源码解析 1. 服务注册 1.1 客户端服…

代码随想录 Leetcode110.平衡二叉树

题目&#xff1a; 代码(首刷看解析 2024年1月30日&#xff09;&#xff1a; class Solution { public:int depth(TreeNode* root) {if (root nullptr) return 0;int leftHeight depth(root->left);if (leftHeight -1) return -1;int rightHeight depth(root->right)…

【Linux C | 网络编程】getsockname 和 getpeername函数详解及C语言例子

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

【遥感专题系列】遥感影像信息提取之——人工目视解译

​遥感影像通过亮度值或像元值的高低差异&#xff08;反映地物的光谱信息&#xff09;及空间变化&#xff08;反映地物的空间信息&#xff09;来表示不同地物的差异&#xff0c;这是区分不同影像地物的物理基础。 ​人工解译是目前国内使用最多的一种影像提取方法&#xff0c;如…

Android studio环境搭建过程异常

异常&#xff1a;Connect timed out 创建新项目时&#xff0c;提示time out 解决方案&#xff1a;修改gradle下载地址&#xff0c;使用国内镜像地址 distributionUrlhttps\://services.gradle.org/distributions/gradle-8.2-bin.zip修改成distributionUrlhttps\://mirrors.c…

海外拓展必备:精细规划的出海策略,实现市场全球化的第一步

随着全球化的深入&#xff0c;越来越多的企业开始将目光投向海外市场&#xff0c;以寻求更广阔的发展空间。然而&#xff0c;进入新的市场并进行有效的海外营销并非易事&#xff0c;需要经过精心策划和系统性的执行。本文Nox聚星将和大家详细探讨出海营销的第一步应该如何着手&…

初始化和赋值

列表初始化 #include <iostream>struct test{int a; };class object{ public:object(int v10):a{v}{}int a; };int main(){test t1;test t2{};std::cout<<t1.a<<std::endl;std::cout<<t2.a<<std::endl;object b2{11};std::cout<<b2.a<…

泛谈一下数字化技能的学习,SPSS、Stata还是Python?技术、业务+表达、展现!

1.本科、专科上学时对于这些偏数学类的课程还是要好好学习 应知乎、小红书、CSDN很多年轻朋友、同学们的邀请&#xff0c;今天我泛谈一下数字化技能的学习。很多学生在本科或专科上学时代学过统计学、计量经济学、机器学习、数据分析、统计分析、数据挖掘、量化建模等一门或多…

宏集物联网HMI、工业树莓派、触控一体机,超值优惠限时放送

亲爱的客户朋友们&#xff1a; 新春佳节将至&#xff0c;为回馈广大新老客户们一年来的支持与厚爱&#xff0c;宏集科技推出一场盛大的新春促销活动&#xff01; 我们精选了一系列宏集科技优质产品&#xff0c;包括工业树莓派、物联网HMI、触控一体机等&#xff0c;为您的工程…

React通用后台模板

一. 项目初始化 1. 创建项目 环境 npm init vite 打开package.json,参考以下各模块版本: "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^7.2.8", …

探索Allure Report:提升自动化测试效率的秘密武器!

一.使用 Allure2 运行方式-Python # --alluredir 参数生成测试报告。 # 在测试执行期间收集结果 pytest [测试用例/模块/包] --alluredir./result/ (—alluredir这个选项 用于指定存储测试结果的路径)# 生成在线的测试报告 allure serve ./result二.使用 Allure2 运行方式-Ja…

Java项目:基于SSM框架实现的家纺用品销售管理系统(ssm+B/S架构+源码+数据库+毕业论文)

一、项目简介 本项目是一套ssm814基于SSM框架实现的家纺用品销售管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试…

【WebGIS实例】(13)MapboxGL+Vue 实现自定义组件地图气泡弹窗 popup

前言 没有前言&#xff0c;直接上代码了 代码 核心方法 const addComponentPopup (component, feature, lnglat, map) > {const popup new mapboxgl.Popup({// anchor: center, // center , top , bottom , left , right , top-left , top-right , bottom-left , and …

使用Neo4j做技术血缘管理

目录 一、neo4j介绍 二、windows安装启动neo4j 2.1下载neo4j 2.2 解压文件 2.3 启动neo4j 三、neo4j基础操作 3.1 创建结点和关系 3.2 查询 3.3 更改 3.4 删除 四、技术血缘Demo实现 4.1 构建节点对象 4.2 构建存储对象 4.3 创建有属性关联关系 4.4 最后是图结果…