React.js更新数据时如何获取已上传图片的文件名

问题原因 #

浏览器出于安全策略限制，禁止前端代码主动设置type="file"输入框的value属性，因此你无法直接将后端返回的图片文件名填充到原生文件选择框中，替换默认的「未选择文件」提示。

解决方法 #

方案1：新增已有文件提示区域（改造成本最低）

保留原有表单逻辑，在文件选择框上方单独展示已上传的文件名，提交时做兼容处理即可。
修改后的表单代码：

<div className="form-group">
  <label htmlFor="">Image</label>
  {/* 已有文件提示 */}
  {initialValues.image && (
    <p className="mb-2">当前已上传文件：{initialValues.image}</p>
  )}
  <Input
    type="file"
    name="image"
    onChange={(event: any) =>
      setFieldValue("image", event.target?.files[0])
    }
  />
  <FormikValidationError
    name="image"
    errors={errors}
    touched={touched}
  />
</div>

提交表单时的兼容处理示例：

onSubmit: (values) => {
  const formData = new FormData()
  Object.keys(values).forEach(key => {
    if (key === 'image') {
      // 仅当用户选择了新文件时，才追加文件到请求参数
      if (values.image instanceof File) {
        formData.append('image', values.image)
      }
      return
    }
    formData.append(key, values[key])
  })
  // 调用更新接口提交formData即可，后端未收到image参数时复用原有值
}

方案2：自定义文件选择组件（完全控制展示效果）

如果需要统一新、旧文件的显示样式，可以隐藏原生文件输入框，自行实现选择按钮和文件名展示：

<div className="form-group">
  <label htmlFor="">Image</label>
  {/* 自定义展示区域 */}
  <div className="custom-file-bar mb-2">
    <span>
      {values.image instanceof File 
        ? values.image.name 
        : values.image || "未选择文件"
      }
    </span>
    <button 
      type="button" 
      onClick={() => document.getElementById("blogImageInput").click()}
    >
      选择文件
    </button>
  </div>
  {/* 隐藏原生输入框 */}
  <Input
    id="blogImageInput"
    type="file"
    name="image"
    style={{ display: "none" }}
    onChange={(event: any) =>
      setFieldValue("image", event.target?.files[0])
    }
  />
  <FormikValidationError
    name="image"
    errors={errors}
    touched={touched}
  />
</div>

你可以根据需求给自定义区域添加样式，实现和原生控件一致或者更符合产品设计的效果。

内容的提问来源于stack exchange，提问作者sudhansu bhattarai