解决 Ant Design Vue Upload 组件在苹果手机上只能拍照无法选择相册的问题

最近上线发现了这个问题,看别的文档改了很多属性也不行,发现element组件就可以,对比之后就知道问题所在。

原因:

默认情况下,iOS 设备会将 <input type="file">capture 属性设置为 true,导致用户只能通过相机拍照上传图片,而不能从相册中选择图片。这个问题是因为默认情况下,a-upload 组件会在 <input type="file"> 上添加 capture 属性,从而限制了用户的选择方式

这个就是正常的:

 <input type="file" name="file">

解决:

需要确保 <input type="file"> 不包含 capture 属性。在 Ant Design Vue 中,a-upload 组件默认会添加 capture 属性。

vue3写法

<template>
  <a-upload
    ref="uploadRef"
    v-model:file-list="form.deviceImagesUrl"
    :action="fileUploadUrl"
    list-type="picture-card"
    :max-count="10"
    :headers="headers"
    @preview="handlePreview"
    :disabled="props.showType === 2"
    name="file"
  >
      <plus-outlined />
      <div style="margin-top: 8px">Upload</div>
  </a-upload>
</template>

<script>
import { onMounted, ref } from 'vue';

export default {

    const uploadRef = ref(null);
    onMounted(() => {
      // 在组件挂载后,找到 input 元素并删除 capture 属性,并添加 name 属性
      const inputElement = uploadRef.value?.$el?.querySelector('input[type="file"]');
      if (inputElement) {
        inputElement.removeAttribute('accept'); // 移除 accept 属性
        inputElement.removeAttribute('capture'); // 移除 capture 属性
        inputElement.setAttribute('name', 'file'); // 添加 name 属性
      }
    });

  },
</script>

<input type="file"> 属性详解

1. accept
  • 作用: 指定可以接受的文件类型。例如,accept="image/*" 表示只接受图像文件。
  • 示例<input type="file" accept="image/*">
2. capture
  • 作用: 指定是否应该激活设备的摄像头或麦克风。这个属性主要用于移动设备。
  • :
    • camera: 强制使用摄像头。
    • user: 用户选择(默认)。
    • environment: 后置摄像头。
  • 示例<input type="file" capture="camera">
3. multiple
  • 作用: 允许用户选择多个文件。
  • 示例<input type="file" multiple>
4. webkitdirectory
  • 作用: 允许用户选择整个目录而不是单个文件。
  • 示例<input type="file" webkitdirectory>
5. directory
  • 作用: 类似于 webkitdirectory,但适用于非 WebKit 浏览器。
  • 示例<input type="file" directory>

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

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

相关文章

[数据集][目标检测]电动车头盔佩戴检测数据集VOC+YOLO格式4235张5类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;4235 标注数量(xml文件个数)&#xff1a;4235 标注数量(txt文件个数)&#xff1a;4235 标注…

python 正则表达式“.*”和“.*? ”的区别

“.*”和“.*? ”的区别 点号表示任意非换行符的字符&#xff0c;星号表示匹配它前面的字符0次或者任意多次。所以“.*”表示匹配一串任意长度的字符串任意次。这个时候必须在“.*”的前后加其他的符号来限定范围&#xff0c;否则得到的结果就是原来的整个字符串。 “.*? &…

基于SpringBoot校园快递代取系统

基于springbootvue实现的校园快递代取系统&#xff08;源码L文ppt&#xff09;4-049 3系统设计 3.1.1系统结构图 系统结构图可以把杂乱无章的模块按照设计者的思维方式进行调整排序&#xff0c;可以让设计者在之后的添加&#xff0c;修改程序内容…

基于SpringBoot框架和Flask的图片差异检测与展示系统

目录 1. 项目目标 2. 功能需求 &#xff08;1&#xff09;图片上传功能 &#xff08;2&#xff09;差异检测算法 &#xff08;3&#xff09;后端服务 &#xff08;4&#xff09;前端展示 &#xff08;5&#xff09;阿里云服务器存储 &#xff08;6&#xff09;数据库记…

Java:正则表达式 matches

文章目录 正则表达式作用基本用法小结代码 案例&#xff1a;校验用户输入的电话&#xff0c;邮箱&#xff0c;是否合法\\.是什么意思 黑马学习笔记 正则表达式 由一些特定的字符组成&#xff0c;代表的是一个规则 作用 用来校验数据格式是否合法在一段文本中查找满足要求的内…

Elasticsearch:无状态世界中的数据安全

作者&#xff1a;来自 Elastic Henning Andersen 在最近的博客文章中&#xff0c;我们宣布了支持 Elastic Cloud Serverless 产品的无状态架构。通过将持久性保证和复制卸载到对象存储&#xff08;例如 Amazon S3&#xff09;&#xff0c;我们获得了许多优势和简化。 从历史上…

Web3D 技术发展瓶颈在哪里?

Web3D 技术的发展瓶颈主要集中在以下几个方面&#xff1a; 1、性能和优化&#xff1a;尽管现代浏览器和硬件逐步提高了性能&#xff0c;但高质量的3D渲染仍可能导致性能瓶颈。特别是在移动设备上&#xff0c;图形渲染和计算可能会受到限制。建议合理控制好项目资源量&#xff…

实验记录 | 点云处理 | K-NN算法3种实现的性能比较

引言 K近邻&#xff08;K-Nearest Neighbors, KNN&#xff09;算法作为一种经典的无监督学习算法&#xff0c;在点云处理中的应用尤为广泛。它通过计算点与点之间的距离来寻找数据点的邻居&#xff0c;从而有效进行点云分类、聚类和特征提取。本菜在复现点云文章过程&#xff…

详解React setState调用原理和批量更新的过程

1. React setState 调用的原理 setState目录 1. React setState 调用的原理2. React setState 调用之后发生了什么&#xff1f;是同步还是异步&#xff1f;3. React中的setState批量更新的过程是什么&#xff1f; 具体的执行过程如下&#xff08;源码级解析&#xff09;&#x…

基于SpringBoot+Vue+MySQL的宿舍维修管理系统

系统展示 前台界面 管理员界面 维修员界面 学生界面 系统背景 在当今高校后勤管理的日益精细化与智能化背景下&#xff0c;宿舍维修管理系统作为提升校园生活品质、优化资源配置的关键环节&#xff0c;其重要性日益凸显。随着学生规模的扩大及住宿条件的不断提升&#xff0c;宿…

人机交互系统中的人脸讲话生成系统调研

《Human-Computer Interaction System: A Survey of Talking-Head Generation》 图片源&#xff1a;https://github.com/Yazdi9/Talking_Face_Avatar 目录 前言摘要一、背景介绍二、人机交互系统体系结构2.1. 语音模块2.2. 对话系统模块2.3. 人脸说话动作生成 三 人脸动作生成…

来啦| LVMH路威酩轩25届校招智鼎高潜人才思维能力测验高分攻略

路威酩轩香水化妆品(上海)有限公司是LVMH集团于2000年成立&#xff0c;负责集团旗下的部分香水化妆品品牌在中国的销售包括迪奥、娇兰、纪梵希、贝玲妃、玫珂菲、凯卓、帕尔马之水以及馥蕾诗等。作为目前全球最大的奢侈品集团LVMH 集团秉承悠久的历史&#xff0c;不断打破常规&…

【微处理器系统原理和应用设计第六讲】片上微处理器系统系统架构

一、概念辨析 首先来厘清以下概念&#xff1a;微处理器&#xff0c;微控制器&#xff0c;单片机&#xff0c;片上微处理器系统 &#xff08;1&#xff09;微处理器&#xff1a;即MPU&#xff08;Microprocessor Unit&#xff09;&#xff0c;微处理器是一种计算机的中央处理单…

如何打造个性化大学生聊天室?Java SpringBoot Vue实战,2025最新设计指南

✍✍计算机毕业编程指导师** ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java…

【深度学习】向量化

1. 什么是向量化 向量化通常是消除代码中显示for循环语句的技巧&#xff0c;在深度学习实际应用中&#xff0c;可能会遇到大量的训练数据&#xff0c;因为深度学习算法往往在这种情况下表现更好&#xff0c;所以代码的运行速度非常重要&#xff0c;否则如果它运行在一个大的数据…

【Linux】翻山越岭——进程地址空间_c语言父子进程地址空间

文章目录 一、是什么 写时拷贝 二、为什么三、怎么做 区域划分和调整 一、是什么 回顾我们学习C/C时的地址空间&#xff1a; 有了这个基本框架&#xff0c;我们对于语言的学习更加易于理解&#xff0c;但是地址空间究竟是什么❓我们对其并不了解&#xff0c;是不是内存呢&…

海外云服务器安装 MariaDB10.6.X (Ubuntu 18.04 记录篇二)

本文首发于 秋码记录 MariaDB 的由来&#xff08;历史&#xff09; 谈起新秀MariaDB&#xff0c;或许很多人都会感到陌生吧&#xff0c;但若聊起享誉开源界、业界知名的关系型数据库——Mysql&#xff0c;想必混迹于互联网的人们&#xff08;coder&#xff09;无不知晓。 其…

MonoHuman: Animatable Human Neural Field from Monocular Video 精读

一、共享双向变形模块 1. 模块的核心思想 共享双向变形模块的核心目标是解决从单目视频中生成不同姿态下的3D人体形状问题。因为视频中的人物可能处于各种动态姿态下&#xff0c;模型需要能够将这些不同姿态的几何形状进行变形处理&#xff0c;以适应标准的姿态表示并生成新的…

SVN下载安装使用方法

目录 &#x1f315;SVN是什么&#xff1f;&#x1f319;SVN跟Git比的优势&#x1f319;SVN的用处 &#x1f315;下载安装使用方法 &#x1f315;&#x1f319;⭐ &#x1f315;SVN是什么&#xff1f; 代码版本管理工具 它能记住你每次的修改 查看所有的修改记录 恢复到任何历…

【Linux网络】详解TCP协议(1)

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; Linux网络 &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解 TCP协议 的相关内容。 如果看到最后您觉得这篇文章写得不错&am…