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

最新推荐文章于 2024-07-16 17:19:04 发布

你亦老

最新推荐文章于 2024-07-16 17:19:04 发布

阅读量3.9k

点赞数 4

文章标签：前端 upload ant javascript

本文链接：https://blog.csdn.net/weixin_57229715/article/details/121352540

版权

该博客介绍了如何实现用户上传并修改JSON文件后保存修改内容的前端功能。通过使用React的antd Upload组件读取文件，显示在代码编辑器中供用户修改。当用户点击保存时，将修改后的文件内容创建成新的文件流，并使用FormData提交到后端API进行保存。

摘要由CSDN通过智能技术生成

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

实现方式：

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);
          } 
        });
      }