多部分表单解析错误 - 多部分中的无效边界：无

Question

I am very frustrated and could not find the soloution:

I am creating a project using angularjs and nodejs.I get image data from angular side in node.js and send this data to further api.I got error

{
  "error": {
    "detail": "Multipart form parse error - Invalid boundary in multipart: None"
  }
}

here is my code in nodejs side:

var request = require('request');
    console.log(req.files);
var data = {

        website:'www.gamail.xom',
        contact_number:'dsdsd',
        services_offered:'dsadasd',
        contact_name:'dasdas',
        provider_category:'exchange',
        email:'kk@gmail.com',
        image:req.files

    }
var api_url = global.common.base_url + 'vcard/1.0.0/visit_card/' + req.param('uuid') +'/';
    request({
        url: api_url,
        method: 'PUT',
        headers: {
            'Content-Type': 'multipart/form-data',
            'Authorization': 'Bearer '+req.cookies.apitoken
        },
        json: data

    }, function(error, response, body) {
        if(response.statusCode == 200 && !error){
            res.end(JSON.stringify(body));
        }else{          
            res.send(response.statusCode, { error: body });
        }
    });
}

In req.files i get

{ image:
   [ { fieldName: 'image[0]',
       originalFilename: 'icon_dd_chart_grey.png',
       path: 'C:\\Users\\karakuma\\AppData\\Local\\Temp\\op74_gLSzPs-_49aT1GF0si
7.png',
       headers: [Object],
       size: 1474,
       name: 'icon_dd_chart_grey.png',
       type: 'image/png' } ] }

Answer 1

Try defining the content type as follows.

content_type='multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'

I was facing the same issue and it worked for me in python.

Answer 2

I also faced this issue while trying to upload file. For me the issue was the FormData, which was coming as Object instead of FormData instance

So i converted my object to FormData using below code:

 const getFormData = object => Object.keys(object).reduce((formData, key) => { formData.append(key, object[key]); return formData; }, new FormData());

And the just executed my post request, in my case using Vue resource:

 return Vue.http.post(url, getFormData(formData), { headers: { 'Content-Type': 'multipart/form-data' } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 3

I have been facing this problem in angular 11 connected to Django rest API, I was able to curl with something like this in order to upload a JSON with a form:

curl -X POST -S \
  -H 'Accept: application/json' \
  -u "user:password" \
  -F "name=name" \
  -F "label=mylabel" \
  -F "otherfields=something" \
  -F "photo=@./example.png;type=image/png" \
  http://127.0.0.1:8000/api/v1/item/

But I was getting that exception using my header as httpOptions:

'content-type': 'multipart/form-data',

So I just commented out the content-type and it seems angular is so clever that he creates the header for you and will set the multipart together with the boundaries.

For more information on this: What is the boundary in multipart/form-data?

Answer 4

let data = fs.createReadStream('/home/insert/screen03.jpg');
    let form = new FormData();

    form.append('files', data, 'test.jpg');

    form.getLength((err, length) => {
        if (err) { reject(err); }
        let headers = Object.assign({ 'Content-Length': length, 'Authorization': `Token b84db005a7fc1e5471a763aa42fcc5734b7bb22a` }, form.getHeaders());
        return axios.post(`http://192.168.88.252:8000/resources/`, form, { headers: headers })
            .then(res => console.log(res.data))
            .catch(error => console.log(error.response.data))
    });

Answer 5

There is no need to mention the content type in header, fetch() will detect it's content type by itself.

let formData = new FormData()
formData.append("email", email);
formData.append("password", password);
formData.append("image", image);

const response = await fetch('http://localhost:8000/api/authentication/register/', {
                method: 'POST',
                headers: {'X-CSRFToken': csrftoken}, //django specific
                body: formData,
            });

Answer 6

A boundary is just the 'key' to separate the multiple "parts" of a multipart payload. Normally something like '&' is enough to separate the variables but you need something more unique to separate the payloads within the payload comment

You can use any value that not occurs in the data sent.

NOTE: Because boundary delimiters must not appear in the body parts being encapsulated, a user agent must exercise care to choose a unique boundary parameter value.

The simplest boundary delimiter line possible is something like "---", with a closing boundary delimiter line of "-----".