如何在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}
...

它不起作用。结果是空的

我该如何解决这个问题？