如何使用react hooks、redux实现图片上传到数据库及文件处理

完全可以新增独立的文件处理handler，也可以在原有通用onChange中补充类型判断，两种实现方式如下：

方案1：新增独立文件上传handler（推荐，职责分离更清晰） #

步骤1：新增单独的文件处理函数 #

// 单独处理图片上传逻辑
const onImageChange = e => {
  const file = e.target.files[0]
  if (!file) return

  // 可在这里增加文件校验规则，比如格式、大小限制
  const allowedTypes = ['image/jpeg', 'image/png']
  if (!allowedTypes.includes(file.type)) {
    alert('仅支持上传JPG/PNG格式的图片')
    return
  }
  if (file.size > 2 * 1024 * 1024) {
    alert('图片大小不能超过2M')
    return
  }

  // 文件对象存入state，同时存储文件名用于UI展示
  setPetData({
    ...petData,
    petImage: file,
    petImageName: file.name
  })
}

步骤2：修改文件输入框绑定 #

把文件输入框的onChange事件绑定到上面的新函数：

<input type="file" name="petImage" onChange={e => onImageChange(e)} />

步骤3：调整UI展示逻辑 #

修改文件名展示部分的变量：

<span className="file-name">
  {petData.petImageName || '未选择文件'}
</span>

方案2：原有onChange补充类型判断（无需新增函数） #

如果不想拆分handler，可以直接在原有通用onChange中判断输入框类型，走不同逻辑：

const onChange = e => {
  const { name, type, files, value } = e.target
  
  // 文件类型输入框走文件处理逻辑
  if (type === 'file') {
    const file = files[0]
    if (!file) return
    // 校验规则可以在这里加
    setPetData({
      ...petData,
      [name]: file,
      [`${name}Name`]: file.name
    })
  } else {
    // 普通输入框走原有逻辑
    setPetData({ ...petData, [name]: value })
  }
}

因为携带文件上传，提交数据时不能直接传普通JS对象，需要封装为FormData格式：

const handleSubmit = e => {
  e.preventDefault()
  const formData = new FormData()
  // 遍历petData所有字段插入FormData
  Object.keys(petData).forEach(key => {
    formData.append(key, petData[key])
  })
  // 调用redux的petRegister action
  petRegister(formData)
}

提示：对应的后端接口需要支持multipart/form-data类型的请求，Redux异步请求中不要手动设置Content-Type，浏览器会自动生成带boundary的正确请求头。

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