ant上传组件upload,前端读取文件、创建文件

业务需求是用户上传文件后，还能修改文件内容,最后保存修改后的文件

实现方式：

1.前端读取文件内容后显示在代码编辑器中  方便用户修改

2.点保存按钮时，拿到改变的文件内容后，创建新的文件流 ， 提交给后端

----------------------------------------------------------

这里演示的是JSON文件数据

选择文件

1.拿到文件的JSON数据后，在代码编辑中显示

js代码：react引入antd的Upload组件

  
  onImportExcel = (file) => {
      // 创建FileReader 对象读取
      const reader = new FileReader();
      reader.readAsText(file);
      reader.onload = () => {
        // 获取文件内容存进tempFile
        this.setState({ tempFile: reader.result});
      };
  };

    
    const uploadProps = {
      name: 'file',
      action: '',
      showUploadList: false,
      fileList,
      onChange: this.handleChange,
      beforeUpload: (file, fileList) => {
        this.onImportExcel(file);
      },
    };


<Upload {...uploadProps} accept=".JSON">
    <Button type="primary" ghost className="mr-md">
        导入JSON文件
     </Button>
</Upload>

2 拿到改变的文件内容后，创建新的文件流 ， 提交给后端

   handleSave = () => {
        const fileConent = 'test'; // fileConent其实时代码编辑器用户修改的内容
        const formData = new FormData();
        // 将得到的文件流添加到FormData对象
        const uuid = createUuid();
        const newFile = new Blob([fileConent], { type: 'application/json' });
        // tempFile.name是文件名
        formData.append('file', newFile, tempFile.name);
        formData.append('uuid', uuid);
        axios.post(`/api/upload`, formData).then(res => {
          if (res.status === 200) {
            console.log('上传成功', res.data);
          } 
        });
      }