I'm trying to upload images from a Vue frontend via Illuminate/Http/Request to WinterCMS. Vue finds the file and i can console.log the File object, but I'm unsure how to get this over the api. for example I've tried

public function saveImage(Request $req){
$images = $req->files('images');
}

which doesn't work, nor does

public function saveImage(Request $req){
$images = $req['images'];
}

I'm using a controller to handle my routes eg:

Route::post('/saveImage', 'Author\Project\Controllers\ProductControl@saveImage');

I've added an attachOne relation to the plugin as usual and my form has enctype="multipart/form-data" I've had this problem before and got around it by converting images to base64 but this project will have quite a few images and I don't want to go down that route again. Any suggestions greatly appreciated

CodePudding user response：

You can send images as regular post and use regular $request->file('images') method in your Laravel controller.

You can use Javascript FormData object. For example;

<div>
        <input type="file" @change="handleImages" multiple>
        <button @click="uploadImages">Upload!</button>
</div>

data: () =>  ({
  images: []
}),
methods: {
  handleImages (event) {
    this.images = event.target.files
  },
  uploadImages () {
    const formData = new FormData();
    for (const i of Object.keys(this.images)) {
      formData.append('images', this.images[i])
    }
    axios.post('/saveImage', formData, {
    }).then((res) => {
      console.log(res)
    })
    
  }
}