如何使用typescript将zip文件数据发送到REST API ?

Question

我想从GUI上传一个zip文件，并将该zip文件保存在/temp文件夹中。在我的应用程序中，前端代码是用typescript编写的，后端代码是用golang编写的。

当我从前端上传zip文件时，zip文件数据在浏览器控制台中看起来如下:

data:application/x-zip-compressed;base64,UEsDBBQAAAAAAHdPvlQAAAAAAAAAAAAAAAAYAAAAa2lhbGlfYmFja3VwXzI4XzA1XzIwMjIvUEsDBBQAAAAAAFxPvlQAAAAAAAAAAAAAAAAeAAAAa2lhbGlfYmFja3VwXzI4XzA1XzIwMjIvZ3JhcGgvUEsDBBQAAAAAAFFPvlQAAAAAAAAAAAAAAAAiAAAAa2lhbGlfYmFja3VwXzI4XzA1XzIwMjIvZ3JhcGgvYXBpL1BLAwQUAAAA......

当我试图在后端获取请求时，它总是为空。

是否有任何方法将上述数据发送到使用typescript后端?

下面是我的前端代码

handleFileInputChange = (_event, file) => {
this.setState({ 
filename: file.name });
console.log(this.state.filename);
}
handleTextOrDataChange = value => {
this.setState({ 
fileData: value });
}
handleClear = _event => this.setState({ filename: '', value: '' });
handleFileReadStarted = _fileHandle => this.setState({ isLoading: true });
handleFileReadFinished = _fileHandle => this.setState({ isLoading: false });
saveFileData = (filename: string, filedata: any) => {
console.log("Filename:",filename);
console.log("Filedata:",filedata); 
var str = filedata;
var splitted1: any
var splitted = str.split(","); 
for (let i=0;i<splitted.length;i++){
splitted1 = splitted[1]
}

console.log(splitted1)
API.sendFileNameAndFileData(filename,splitted1).then(response => {
this.setState({
fileSavestatusText: response.data,
});
});
};
render(){
return (
<FileUpload
id="archive-file"
type="dataURL"
value={value}
filename={filename}
filenamePlaceholder="Drag and drop a file or upload one"
onFileInputChange={this.handleFileInputChange}
onDataChange={this.handleTextOrDataChange}
onTextChange={this.handleTextOrDataChange}
onReadStarted={this.handleFileReadStarted}
onReadFinished={this.handleFileReadFinished}
onClearClick={this.handleClear}
hideDefaultPreview
browseButtonText="Upload"
height='425px'
width='810px'
>
{filename && (
<div className="pf-u-m-md">
<FileUploadIcon size="md" /> Custom preview here for your file named {filename}
</div>
)}
</FileUpload>
<Button className= { buttonstyle } variant="primary" onClick={() => 
this.saveFileData(this.state.filename, this.state.fileData)}> Save
</Button>
);
}

Answer 1

我通过使用以下ioutl函数在后端处理响应

body, err := ioutil.ReadAll(r.Body)
s := string(body)
fmt.Println(s)
dec, err := base64.StdEncoding.DecodeString(s)
if err != nil {
panic(err)
}

，并对主体变量执行操作，并将其用作上述代码。