ant上传组件upload,前端读取文件创建文件
目录
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);
}
});
}