使用 Vue 和 Winter Cms 进行前端文件上传

Question

我正在尝试通过 Illuminate/Http/Request 从 Vue 前端将图像上传到 WinterCMS。 Vue 找到了文件，我可以 console.log 文件对象，但我不确定如何通过 api 获取它。例如我试过

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

哪个不起作用，

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

我正在使用控制器来处理我的路线，例如：

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

我像往常一样向插件添加了一个 attachOne 关系，我的表单有 enctype="multipart/form-data" 我以前遇到过这个问题，通过将图像转换为 base64 来解决这个问题，但是这个项目会有很多图像，我不想再走这条路了。非常感谢任何建议

Answer 1

您可以像常规 post 一样发送图像并在 Laravel 控制器中使用常规 $request->file('images') 方法。

您可以使用 Javascript FormData 对象。例如;

<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)
    })
    
  }
}

使用 Vue 和 Winter Cms 进行前端文件上传

Front End File Upload using Vue and Winter Cms

laravel

vue.js

octobercms