【问题记录】文件上传遇到的问题

项目场景：

由于种种原因，内嵌在移动app中的业务需要使用h5的input type=file 做照片上传，视频上传

---

问题描述

连续上传相同的照片失效

第一张上传了test.png，紧接着上传第二张也是test.png，竟然失去效果，如下图效果

核心代码

import React, { ChangeEvent, useState } from "react";
import { Toast } from 'antd-mobile'
import styles from './imagePicker.module.less'

import cameraIcon from '@assets/images/camera.png'
import Config from '@config'
import fetch from '@fetch'

export const ImagePicker = (props: ImagePickerProp) => {
  const { files, max = 0, onImageAdd, onDel } = props

  const RenderChoseBtn = () => {
    if (files.length >= max) {
      return null
    }
    return (
      <div className={styles.choseContainer}>
        <input
          multiple={false}
          type="file"
          accept="image/*"
          onChange={async e => {
            const { url, err } = await uploadImageFile(e)
            if (err) {
              Toast.fail(err.toString())
            } else {
              onImageAdd(url)
            }
          }}
        />
        <img className={styles.cameraIcon} src={cameraIcon} />
        <div className={styles.txtDes}>添加照片</div>
        <div className={styles.selectedNum}>
          ({files.length}/{max})
        </div>
      </div>
    )
  }

  const RenderImgList = () => {
    return files.map((url, i) => {
      return (
        <div key={`img_${i}`} className={styles.imgContainer}>
          <img className={styles.img} src={url} />
          <div className={styles.delContainer} onClick={() => onDel(i)} />
        </div>
      )
    })
  }

  return (
    <div className={styles.container}>
      {RenderImgList()}
      {RenderChoseBtn()}
    </div>
  )
}

type ImagePickerProp = {
  // 图片文件数组
  files: Array<string>
  // 点击图片触发的回调
  onImageAdd: (url: string) => void
  // 点击图片删除触发的回调
  onDel: (index: number) => void
  // 最多上传图片数
  max: number
}

export async function uploadImageFile(e: ChangeEvent<HTMLInputElement>) {
  const { files } = e.target
  const file = files[0]

  if (file?.size > 20 * 1024 * 1024) {
    return { err: '图片大小不能超过20M', url: null}
  }
  const params = new FormData()
  params.append('images', file)
  params.append('scene', '0101')

  Toast.loading('上传中...', 0)
  try {
    const { err, res: url } = await uploadImage(params)
    return { err, url }
  }
  catch (e) {}
  finally {
    Toast.hide()
  }
}

function uploadImage(param: FormData) {
  const url = `${Config.HOST}/common/upload/image.do`
  return fetch.postFile<string>(url, param, { needCheckLogin: false })
}

---

原因分析：

注意观察上传input type=file的那段代码，onChange 事件触发上传逻辑，经过调试发现问题就出在这，火狐浏览器连续相同的文件是可以触发onChange事件，而chrome浏览器 和 android手机触发不了onChange事件

注意观察上传input type=file的那段代码，onChange 事件触发上传逻辑，经过调试发现问题就出在这，火狐浏览器连续相同的文件是可以触发onChange事件，而chrome浏览器 和 android手机触发不了onChange事件

---

解决方案：

重置 input 状态。上传成功后改变input的key，代码如下

export const ImagePicker = (props: ImagePickerProp) => {
  const { files, max = 0, onImageAdd, onDel } = props
  const [key, setKey] = useState<number>(0)

  const RenderChoseBtn = () => {
    if (files.length >= max) {
      return null
    }
    return (
      <div className={styles.choseContainer}>
        <input
          key={key}      //指定input框 key
          multiple={false}
          type="file"
          accept="image/*"
          onChange={async e => {
            const { url, err } = await uploadImageFile(e)
            setKey(va => va + 1)   //上传成功后改变input框的key值，重置了input的状态，这样连续相同的照片即可触发onChange事件
            if (err) {
              Toast.fail(err.toString())
            } else {
              onImageAdd(url)
            }
          }}
        />
        <img className={styles.cameraIcon} src={cameraIcon} />
        <div className={styles.txtDes}>添加照片</div>
        <div className={styles.selectedNum}>
          ({files.length}/{max})
        </div>
      </div>
    )
  }
  
  ...