如何在 vue 组件上使用 axios 传递上传的文件和传递参数？

Question

我的 vue 组件上传文件图像是这样的：

<template>
    <section>
        <ul class="media-list">
            ...
        </ul>
    </section>
</template>

<script>
    export default {
        ...
        props: ['productId'],
        methods: {
            ...
            onFileChange(e, index) {
                let files = e.target.files,
                let formData = new FormData()
                formData.append('file', files[0])
                axios.post(window.App.baseUrl+'/admin/product/upload-image',
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                ).then(function(){
                    console.log('SUCCESS!!')
                })
                .catch(function(){
                    console.log('FAILURE!!')
                });
            }
        }
    }
</script>

所以如果用户上传文件图片会调用onFileChange方法

我的路线是这样的：

Route::prefix('admin')->group(function(){
    Route::prefix('product')->group(function(){
        Route::post('upload-image', 'Admin\ProductController@uploadImage')->name('admin.product.upload-image');
    });
});

我的控制器是这样的：

public function uploadImage(Request $request)
{
    echo '<pre>';print_r($request->all());echo '</pre>';die();
}

代码有效。我成功地在控制器中上传了文件

但是这里我也想传递另一个参数。我想传递参数 productId

我尝试像这样更改代码 axios :

...
axios.post(window.App.baseUrl+'/admin/product/upload-image',
{product_id: this.productId, formData}
...

它不起作用。结果为空

我该如何解决这个问题？

Answer 1

将 product_id 放入 formData。

let formData = new FormData();
formData.append('file', files[0]);
formData.append('product_id', this.productId);

axios.post(window.App.baseUrl+'/admin/product/upload-image', formData)
  .then(function(){
    console.log('SUCCESS!!')
  })
  .catch(function(){
    console.log('FAILURE!!')
  });

如何在 vue 组件上使用 axios 传递上传的文件和传递参数？

How can I pass file uploaded and pass parameter with axios on vue component?

laravel

vue.js

vue-component

vuejs2

laravel-5.6