东营做网站优化/如何在百度发布广告信息

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

实现方式：

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

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

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

这里演示的是JSON文件数据

选择文件

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

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

  onImportExcel = (file) => {// 创建FileReader 对象读取const reader = new FileReader();reader.readAsText(file);reader.onload = () => {// 获取文件内容存进tempFilethis.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);} });}