文件选择

文件选择

可清空

在选择了文件之后，文件选择框内会显示已选文件的文件名。
此时点击组件最后的 × 按钮，可以清空选择。

文件类型

等同于 <input> 的 accept 属性，限制文件选择框，可以选择的文件类型。
schema:

{
  "type": "input-file",
  "accept": "image/*" // 默认值为空，可以选择任意类型
}

注意事项

1. 组件目前只支持单选。
2. 文件选择组件只用做本地文件选择，如需先上传文件后提交 url 地址的，需要自行编写上传逻辑。
3. 在选中文件后，组件会将 JS 原生 File 类型的对象插入到表单数据中。
4. 对于在表单中提交文件的场景，通常需要将表单内容转化为 FormData，下面是转化逻辑的示例。
5. 表单回填时，只要填入诸如 { name: 'banner.jpg', url: 'https://....' } 的对象即可，其中 name 字段用于回填文件名。
6. 因为 FormData 不支持嵌套，因此对于在表单中提交文件的场景，通常只将文件选择组件放在表单的最外层。

function getFormData(schema, data) {
  // 是否含有【文件选择】类型的字段
  const hasInputFile = !!schema.fieldList.filter(field => {
    return field.activated !== false && field.type === 'input-file';
  }).length;
  // 若含有【文件选择】类型的字段则返回 FormData 实例
  if (hasInputFile) {
    // 新建一个 FormData
    const fd = new FormData();
    // 将 data 中含有的字段逐一添加到 fd 中
    for (const key in data) {
      fd.append(key, data);
    }
    // 返回 fd
    return fd;
  }
  // 不含【文件选择】类型的字段，直接返回 data
  return data;
}

// 利用 getFormData 方法得到表单要提交的数据
// 这里的 schema 和 data 分别是schema-form-render 所绑定的 schema 和数据
const postData = getFormData(schema, data);
axios.post(apiUrl, , {
  'Content-Type': 'multipart/form-data',
}).then(res => ...)