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

news2024/9/20 6:24:14

最近上线发现了这个问题,看别的文档改了很多属性也不行,发现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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

三维激光扫描点云配准外业棋盘的布设与棋盘坐标测量

文章目录 一、棋盘标定板准备二、棋盘标定板布设三、棋盘标定板坐标测量一、棋盘标定板准备 三维激光扫描棋盘是用来校准和校正激光扫描仪的重要工具,主要用于提高扫描精度。棋盘标定板通常具有以下特点: 高对比度图案:通常是黑白相间的棋盘格,便于识别。已知尺寸:每个格…

【前端】animation动画以及利用vue制作简单的透明度改变动画,包含vue生命周期实现

一. 问题描述 想做一个文字透明度从1到0然后再从0到1的css动画。 二. 代码写法 2.1 animation写法 2.1.1 animation属性key 2.1.2 代码展示 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"…

芯片解决方案--SL8541e-OpenHarmony适配方案

摘要 本文描述8541E芯片适配OpenHarmony的整体方案。 本文描述的整体方案&#xff0c;不止适用于8541e&#xff0c;也适用于该芯片厂家的其他芯片&#xff0c;如7863、7885&#xff0c;少部分子系统会略有差异。 整体方案架构 整体方案架构如下图&#xff0c;遵循OpenHarmo…

4K4D: Real-Time 4D View Synthesis at 4K Resolution 学习笔记

本文是学习4K4D的笔记记录 Project Page&#xff1a;https://zju3dv.github.io/4k4d/ 文章目录 1 Pipeline1.1 特征向量的计算1.2 几何建模1.3 外观建模⭐1&#xff09; 球谐函数SH模型2&#xff09; 图像融合技术 1.4 可微分深度剥离渲染 2 Train&#xff08;loss&#xff09;…

2024/9/6黑马头条跟学笔记(四)

D4内容介绍 阿里三方安全审核 分布式主键 异步调用 feign 熔断降级 1.自媒体文章自动审核 1.1审核流程 查文章——调接口文本审核——minio下载图片图片审核——审核通过保存文章——发布 草稿1&#xff0c;失败2&#xff0c;人工3&#xff0c;发布9 1.2接口获取 注册阿…

云原生之WEB应用服务器Tomcat(持续更新中)

WEB应用服务器Tomcat 1.Tomcat功能介绍1.1 安装Tomcat1.2 生成启动文件 2.结合反向代理实现Tomcat部署2.1 利用nginx反向代理实现 3.Memcached&#xff08;解决sion丢失问题&#xff09;3.1 简介3.2 安装与启动 4.session 共享服务器 1.Tomcat功能介绍 Tomcat 服务器是一个免费…

Cmake之2.6版本重要特性及用法实例(十一)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列【…

西班牙语语法之西语前置词学习柯桥学外语到银泰对面

前置词用法大盘点 ▼ 1.a 表示行进的方向&#xff1a; Voy a la playa. 我要去海滩。 表示具体的位置&#xff1a; al norte del palacio 在宫殿北侧。 表示具体的时间&#xff1a; Me levanto a las 6. 我6点起床。 表示命令&#xff1a; ¡A trabajar! 工作&#…

linux服务器之top命令详解

top&#xff1a;系统资源管理器 top命令类似于windows的任务管理器&#xff0c;可以查看内存、cpu、进程等信息(动态查看系统资源信息)在linux系统中常用top命令查看资源性能分析工具 一、参数释义&#xff1a; 第一行 系统时间和平均负载 top&#xff1a;名称22:12:46&#…

[数据结构] 哈希结构的哈希冲突解决哈希冲突

标题&#xff1a;[C] 哈希结构的哈希冲突 && 解决哈希冲突 水墨不写bug 目录 一、引言 1.哈希 2.哈希冲突 3.哈希函数 二、解决哈希冲突 1.闭散列 I&#xff0c;线性探测 II&#xff0c;二次探测 2.开散列 正文开始&#xff1a; 一、引言 哈希表是一种非常实用而…

移动UI:分类列表页、筛选页的设计揭秘。

移动UI的列表页设计需要考虑用户体验和界面美观性&#xff0c;以下是一些建议的设计要点&#xff1a; 1. 列表项的展示&#xff1a; 列表页应该清晰地展示各个列表项&#xff0c;包括标题、副标题、缩略图等内容&#xff0c;以便用户快速浏览和识别。可以使用卡片式布局或者简…

计算机毕业设计选题推荐-班级管理系统-教务管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

多云架构下大模型训练的存储稳定性探索

一、多云架构与大模型训练的融合 &#xff08;一&#xff09;多云架构的优势与挑战 多云架构为大模型训练带来了诸多优势。首先&#xff0c;资源灵活性显著提高&#xff0c;不同的云平台可以提供不同类型的计算资源和存储服务&#xff0c;满足大模型训练在不同阶段的需求。例…

机器学习之监督学习(四)决策树和随机森林

机器学习之监督学习&#xff08;四&#xff09;决策树和随机森林 0. 文章传送1. 决策树 Decision Tree案例引入构建过程 0. 文章传送 机器学习之监督学习&#xff08;一&#xff09;线性回归、多项式回归、算法优化[巨详细笔记] 机器学习之监督学习&#xff08;二&#xff09;…

YOLOv8改进实战 | 注意力篇 | 引入ICCV2023顶会LSKNet:大选择性卷积注意力模块LSKA,助力小目标检测

YOLOv8专栏导航:点击此处跳转 前言 YOLOv8 是由 YOLOv5 的发布者 Ultralytics 发布的最新版本的 YOLO。它可用于对象检测、分割、分类任务以及大型数据集的学习,并且可以在包括 CPU 和 GPU 在内的各种硬件上执行。 YOLOv8 是一种尖端的、最先进的 (SOTA) 模型,它建立在以前…

Leetcode JAVA刷刷站(113)路径总和 ||

一、题目概述 二、思路方向 为了找出从根节点到叶子节点路径总和等于给定目标和的所有路径&#xff0c;我们可以使用深度优先搜索&#xff08;DFS&#xff09;的方法。在遍历过程中&#xff0c;我们维护一个当前路径的和以及一个列表来存储当前路径的节点值。当我们到达一个叶…

HarmonyOS云端开发(二)

文章目录 登录认证服务以及云数据库使用一创建登录注册页面二、开启认证服务二、创建数据表1.导出数据表2.使用表 进行增删改查3.查看云数据库 登录认证服务以及云数据库使用 云端开发不需要存储token,由提供的API统一验证&#xff0c;假设未登录则跳转登录页&#xff0c;已登…

uniapp,vite整合windicss

官方文档&#xff1a;https://weapp-tw.icebreaker.top/docs/quick-start/frameworks/hbuilderx 安装&#xff1a; npm i -D tailwindcss postcss autoprefixer # 初始化 tailwind.config.js 文件 npx tailwindcss initnpm i -D weapp-tailwindcss# 假如 tailwindcss 在 weap…

nginx 新建一个 PC web 站点

注意&#xff1a;进行实例之前必须完成nginx的源码编译。&#xff08;阅读往期文章完成步骤&#xff09; 1.编辑nginx的配置文件&#xff0c;修改内容 [rootlocalhost ~]# vim /usr/local/nginx/conf/nginx.conf 2.创建新目录/usr/local/nginx/conf.d/&#xff0c;编辑新文件…

JavaScript (输出,语句,语法)

目录 JavaScript 输出 使用window.alert() 写入警示框 使用document.write() 写入HTMl输入 使用 innerHTML 写入html元素 使用console.log&#xff08;&#xff09;写入 浏览器控制台 JavaScript 语句 实例 语句组成 分号 关键字 JavaScript 语法 JavaScript 标识符 …