reactjs - Hvordan sender man zip-fil data til REST API ved hjælp af typescript?

Jeg vil uploade en zip fra GUI og gemme den zip-fil, som den er, i /temp-mappen. I min applikation er frontend-koden skrevet i typescript og backend-koden skrevet i golang.

Når jeg uploader en zip fra frontend, ser zip-filens data således ud i browserkonsollen:

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

Når jeg prøver at hente forespørgslen på backend, er den altid null.

Er der nogen måde at sende ovenstående data til backend'en ved hjælp af TypeScript?

Nedenfor er min frontend-kode

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

Svar #1

Jeg håndterer svar i backend ved at bruge følgende ioutil-funktion

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

og udføre operationer på kropsvariablerne og bruge det som ovenstående kode.

Relaterede artikler