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

Posted 2023-02-22

【中文标题】如何在 vue 组件上使用 axios 传递上传的文件和传递参数？

【英文标题】：How can I pass file uploaded and pass parameter with axios on vue component?

【发布时间】：2018-08-04 21:11:14

【问题描述】：

我的 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
...

它不起作用。结果为空

我该如何解决这个问题？

【参考方案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!!')
  );