javascript - Problem with uploading file through form-data axios - Stack Overflow

admin管理员组

文章数量:1317906

I am trying to upload on server file, but it gives me the response that file isn't selected. Doing the same thing as in documentation of axios and form-data, but still have errors.

let form = new FormData();
form.append('file', fs.createReadStream('./files/50.jpg'));

const config = {
    headers: {
        ...form.getHeaders(),
        Authorization: token
    }
}

axios.post(url, form, config)
.then(response => console.log(response.data, response.status))
.catch(err => console.error(err.config, err.response.data))

And the response is

{
  url: '',
  method: 'post',
  data: FormData {
    _overheadLength: 148,
    _valueLength: 0,
    _valuesToMeasure: [ [ReadStream] ],
    writable: false,
    readable: true,
    dataSize: 0,
    maxDataSize: 2097152,
    pauseStreams: true,
    _released: true,
    _streams: [],
    _currentStream: null,
    _insideLoop: false,
    _pendingNext: false,
    _boundary: '--------------------------897634953482711246524185',
    _events: [Object: null prototype] { error: [Function: handleStreamError] },
    _eventsCount: 1
  },
  headers: {
    Accept: 'application/json, text/plain, */*',
    'Content-Type': 'multipart/form-data; boundary=--------------------------897634953482711246524185',
    Authorization: 'Bearer token',
    'User-Agent': 'axios/0.19.2'
  },
  transformRequest: [ [Function: transformRequest] ],
  transformResponse: [ [Function: transformResponse] ],
  timeout: 0,
  adapter: [Function: httpAdapter],
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
  maxContentLength: -1,
  validateStatus: [Function: validateStatus]
} { errors: [ { code: 65536, message: 'Must upload one file' } ] }

Help me please how to upload file, where is the error? Or maybe u can give some alternative ways to solve this case.

I am trying to upload on server file, but it gives me the response that file isn't selected. Doing the same thing as in documentation of axios and form-data, but still have errors.

let form = new FormData();
form.append('file', fs.createReadStream('./files/50.jpg'));

const config = {
    headers: {
        ...form.getHeaders(),
        Authorization: token
    }
}

axios.post(url, form, config)
.then(response => console.log(response.data, response.status))
.catch(err => console.error(err.config, err.response.data))

And the response is

{
  url: 'https://example.',
  method: 'post',
  data: FormData {
    _overheadLength: 148,
    _valueLength: 0,
    _valuesToMeasure: [ [ReadStream] ],
    writable: false,
    readable: true,
    dataSize: 0,
    maxDataSize: 2097152,
    pauseStreams: true,
    _released: true,
    _streams: [],
    _currentStream: null,
    _insideLoop: false,
    _pendingNext: false,
    _boundary: '--------------------------897634953482711246524185',
    _events: [Object: null prototype] { error: [Function: handleStreamError] },
    _eventsCount: 1
  },
  headers: {
    Accept: 'application/json, text/plain, */*',
    'Content-Type': 'multipart/form-data; boundary=--------------------------897634953482711246524185',
    Authorization: 'Bearer token',
    'User-Agent': 'axios/0.19.2'
  },
  transformRequest: [ [Function: transformRequest] ],
  transformResponse: [ [Function: transformResponse] ],
  timeout: 0,
  adapter: [Function: httpAdapter],
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
  maxContentLength: -1,
  validateStatus: [Function: validateStatus]
} { errors: [ { code: 65536, message: 'Must upload one file' } ] }

Help me please how to upload file, where is the error? Or maybe u can give some alternative ways to solve this case.

• javascript
• post
• axios
• multipartform-data
• form-data

Share Improve this question Follow asked Jun 16, 2020 at 7:04 TonyTony 6111 gold badge11 silver badge44 bronze badges 5

• what is FormData? – Argee Commented Jun 16, 2020 at 7:07
• npmjs./package/form-data – Tony Commented Jun 16, 2020 at 7:10
• try this: form.append( 'my_file', fs.readFileSync('./files/50.jpg') );axios.post(url, form.getBuffer(), config); ? – Jing.Jiang Commented Jun 16, 2020 at 7:24
• maybe use the form.submit-method? it's documented on the npm-page, does that work? – Argee Commented Jun 16, 2020 at 7:25
• getBuffer() didn't help, and I don't know how to use here form.submit because it's for web application – Tony Commented Jun 16, 2020 at 7:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

here my code to upload file in node.js, it works ok.

    const form = new FormData();
    const file = fse.createReadStream(option.filePath);
    form.append('file', file);
    const header: any = form.getHeaders();
    const reqData = axios({
      method: 'post',
      url: 'myURL',
      data: form,
      headers: header,
      httpsAgent: new https.Agent({
        rejectUnauthorized: false
      }),
      maxContentLength: Infinity,
      maxBodyLength: Infinity,
      onUploadProgress: (progressEvent: any) => {
        const plete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%';
        console.log('upload percent: ' + plete);
      }
    }).then((response: any) => {});

Thanks for everyone, but i found the answer in Postman.Code -> NodeJs - Axios

var axios = require('axios');
var FormData = require('form-data');
var fs = require('fs');
var data = new FormData();
data.append('file', fs.createReadStream('/Users/anton/Downloads/50 (1).jpg'));

var config = {
  method: 'post',
  url: 'https://...',
  headers: { 
    'Authorization': 'Bearer ...', 
    'Content-Type': 'multipart/form-data', 
    ...data.getHeaders()
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

本文标签： javascriptProblem with uploading file through formdata axiosStack Overflow