[Bug Report] 422 Error with el-upload despite correct config

[adavie1]

Element UI version

1.4.2

OS/Browsers version

Linux

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/pj71jkyw/463/

Steps to reproduce

Whilst the current documentation show the UI side fine, I'm having a really tough time getting the component to work uploading to Laravel 5.4, I keep getting a 422 error saying "you did not send the required json in the body"-

  <el-upload
    :action="getEndpoint('/upload/'   localType   '/'    id)"    // creates the correct URL to point to, works correctly.
    :headers="headerInfo"
    :data="fileData"
    accept=" .jpg, .jpeg, .png, .bmp, .pdf"
    list-type="picture-card"
    :on-error="handleUploadError"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>

I've set the headers to:

      headerInfo: {
        'Access-Control-Allow-Origin': this.getEndpoint('/upload/'   this.type.toLowerCase().trim()   '/'   this.id),
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, DELETE',
        'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, X-File-Name, X-File-Size, X-File-Type'
      },
      fileData: {   //Just to see if the data property actually made a difference. What should go here?
        type: this.type,
        id: this.id
      }

Below is the response I'm getting from the server when I try to upload.

This is what is getting to the Laravel backend:
I have a Log::info display in the JsonMiddleware handler that prints out the contents of the request.

[2017-08-08 10:53:21] local.INFO: 1. JsonMiddleware->handle $request=POST /api/v1/upload/site/628 HTTP/1.1
Accept:                       */*
Accept-Encoding:              gzip, deflate, br
Accept-Language:              en-US,en;q=0.8
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, X-File-Name, X-File-Size, X-File-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin:  http://localhost:8000/api/v1/upload/site/628
Connection:                   keep-alive
Content-Length:               50216
Content-Type:                 multipart/form-data; boundary=----WebKitFormBoundaryr5KklRecA5kmCnnw
Host:                         localhost:8000
Origin:                       http://localhost:8080
Referer:                      http://localhost:8080/
User-Agent:                   Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Mobile Safari/537.36
  
[2017-08-08 10:53:21] local.INFO: 2. JsonMiddleware->handle $request.getContent()=  

The cause of the 422 error is that $request.getContent() is empty- having filled all the header and data values in the el-upload component, I'm not sure what else it wants.

What is Expected?

That the uploaded file is passed successfully to the Laravel backend.

What is actually happening?

A 422 error with little ability to diagnose how to solve the issue.

Right now the JsonMiddleware.php (whch generates this error message) is expecting some JSON above and beyond the file payload (which is there) and I've tried passing random data via the data property but that doesn't work either.

Because of the nature of the error "JSON expected" clearly either the internals of el-upload are not
sending something Laravel expects, or there is insufficient info on how to configure el-upload

[Leopoldthecoder]

@adavie1 Is this a dup of #6360?

[adavie1]

Yes, apologies for that- just no reponse on the other one for some time, please close either one. However, my suggestion about more info/docs still stands.