如何在react中转换二进制数据中的文件数据？

Question

我实现了一个文件上传，其中文件与一些数据一起传递到后端。文件和数据必须编码为表单数据。我以两种方式实现了上传：表单数据将文件作为二进制字符串进行合并表单数据将文件作为普通字符串包含（链接到文件）第一个选项适用于我，文件已成功上传，而在第二种情况下，将显示一条错误消息：“提交的数据不是文件。请检查表单上的编码类型。1.文件上传，音频文件作为二进制字符串（工作）Form Dataaudio: (binary)title: Some Titlecontent: Some content1. 创建将音频文件为二进制的表单数据的函数和表单 （ 工作 ）export class CreateStory extends Component {  state = {    title: "",    content:"",    audio:""  };  static propTypes = {    addStory: PropTypes.func.isRequired  };// Use Ref to clear  uncontrolled file field constructor(props) {    super(props);    this.inputRef = React.createRef();  } onChange = (e) => {        if(e.target.name === 'audio') {            this.setState({                [e.target.name]: e.target.files[0]            }, () => console.log(this.state.audio))        } else {            this.setState({                [e.target.name]: e.target.value            }, () => console.log(this.state))        }    }onSubmit = e => {  e.preventDefault();  let { title, content, audio} = this.state;  let formDataStory = new FormData(); // create form formData  formDataStory.append('audio', audio); // add audio to formData  formDataStory.append('title', title); // add title to formData  formDataStory.append('content', content); // add content to formData  console.log (this.formDataStory);  this.props.addStory(formDataStory) // call addStory function with formDataStory as Input to create new Story      .then(() => {        this.setState({          title: "", // clear title field after submission          content:"", // clear content field after submission        });        this.inputRef.current.value = ''; // clear file field after submission       }) };

Answer 1

这并不是一个最低限度的可重复的例子，这个问题已经有1.6年的历史了，但没有答案，所以......

1. 此展开表达式使用标题而不是故事，因此它会擦除其他变量

   story: {
       ...prevState.title,

2. 这将设置 state.audio，忽略 state.story 中的提取值

   this.setState({
       [e.target.name]: e.target.files[0]

   但编码的值为 state.story.audio

   let audio = this.state.story.audio;