解决 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-uploadref="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>