解决 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>