How to cascade a file uploaded in react to node Js and then to another API, all through HTTP calls using axios?

问题

Let me explain my question in detail.

React UI is uploading a file using axios post by creating a form-data to Node Js API.

In Node Js API, using Multer received the file.

const multer = require('multer');
const upload = multer({ storage: multer.memoryStorage() });
.
.
.
router.post('/fileUpload/:customer/', upload.single('file'),  async (req, res) => {
      try {
            const result = await RequestService.sendFile(
          req.file,
          req.params.customer,          
        );
        if (result.status === 200 || 204) {
   
        } else {
          
        }
      } catch (err) {
        
      }
    }
  );
};

and the req.file object looks like below:

  file:
   { fieldname: 'file',
     originalname: 'Sample file.docx',
     encoding: '7bit',
     mimetype:
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
     buffer:
      <Buffer 50 4b 03 04 14 00 06 00 08 00 00 00 21 00 e7 21 07 5d 70 01 00 00 d7 05 00 00 13 00 08 02 5b 43 6f 6e 74 65 6e 74 5f 54 79 70 65 73 5d 2e 78 6d 6c 20 ... >,
     size: 406927 },
  __onFinished: null }

I need to send the same file to another API but the API is looking for form-data.

Try 1 :

const sendFile = async ( data, customer) => {
  try {
    const formdata = new FormData();
    formdata.append('file', data);
    
     const res = await axios.post( fileServiceurl,
      { 
      data: formdata, 
      headers: headerConfigwithJWT
      }
    );
    return res;
  } catch (err) {
    return err.response;
  }
};

Note: data in the above line is the file object

Error:

  TypeError: source.on is not a function
    at Function.DelayedStream.create (....node_modules\delayed-stream\lib\delayed_stream.js:33:10)
    at FormData.CombinedStream.append (....node_modules\combined-stream\lib\combined_stream.js:45:37)
    at FormData.append (....node_modules\form-data\lib\form_data.js:74:3)
    at Object.sendFiletoCustomerFolder (....src\services\dataRequest-service.js:170:14)
    at router.post (....src\controllers\dataRequest-controller.js:151:49)
    at Layer.handle [as handle_request] (....node_modules\express\lib\router\layer.js:95:5)
    at next (....node_modules\express\lib\router\route.js:137:13)
    at Array.<anonymous> (....node_modules\multer\lib\make-middleware.js:53:37)
    at listener (....node_modules\on-finished\index.js:169:15)

Try 2:

    const formdata = new FormData();
    formdata.append('file', data.buffer);
    formdata.append('file-name', data.originalname);
    formdata.append('mimetype', data.mimetype);

    const res = await axios.post(
      fileServiceurl,
      { data: formdata, headers: formdata.getHeaders() }
    );
    return res;
  } catch (err) {
    return err.response;
  }
};

Error: The service is not hit but received 404. why?

Error: Request failed with status code 404
    at createError (....\axios\lib\core\createError.js:16:15)
    at settle (....\axios\lib\core\settle.js:17:12)
    at IncomingMessage.handleStreamEnd (....\axios\lib\adapters\http.js:236:11)
    at IncomingMessage.emit (events.js:194:15)
    at endReadableNT (_stream_readable.js:1103:12)
    at process._tickCallback (internal/process/next_tick.js:63:19) {config: {…}, request: ClientRequest, response: {…}, isAxiosError: true, toJSON: ƒ}

Could anyone help me with the above scenario?

How to create the form-data from the above received file?

Thanks.

来源：https://stackoverflow.com/questions/63315209/how-to-cascade-a-file-uploaded-in-react-to-node-js-and-then-to-another-api-all

标签

javascript

node.js

axios

multer

form-data