React+axios文件上传时FormData.append如何传递动态值

你现在的写法问题出在给append传第二个参数时给变量customeId套了引号，导致传的是固定字符串"customeId"而不是变量值，改成去掉引号的写法即可，同时建议加非空判断避免localStorage取不到值的异常。

修正后的完整代码 #

uploadFile = ({ target: { files } }) =>{
    // 从localStorage取值，加兜底逻辑避免空值
    let customeId = localStorage.getItem("customeId") ?? '';
    console.log( files[0] )
    let data = new FormData();
    // 第二个参数直接传变量，不要加引号
    data.append('customeId', customeId);
    data.append( 'file', files[0] )
    // 如果需要传brokerId，按同样写法新增即可
    // let brokerId = localStorage.getItem("brokerId") ?? '';
    // data.append('brokerId', brokerId);
    const options = {
      onUploadProgress: (progressEvent) => {
        const {loaded, total} = progressEvent;
        let percent = Math.floor( (loaded * 100) / total )
        console.log( `${loaded}kb of ${total}kb | ${percent}%` );

        if( percent < 100 ){
          this.setState({ uploadPercentage: percent })
        }
      }
    }    
    axios.post("https://apimarkp.com/user/", data, options).then(res => { 
      // 可选：上传完成后重置进度条状态
      this.setState({ uploadPercentage: 100 }, () => {
        setTimeout(() => this.setState({ uploadPercentage: 0 }), 1000)
      })
    })
}

核心注意事项 #

• FormData.append的第二个参数如果是变量，不需要加任何引号，加引号会被识别为普通字符串而非变量取值
• 增加空值兜底逻辑，可以避免localStorage未存储对应值时传null到后端的兼容性问题

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