0

我正在尝试使用 vue.js、slim 4 和 vuetify 上传文件，但我无法在后端访问 formData。

这是我的 vuetify 表单：

<v-form>
 <v-row>
   <v-col cols="12" sm="12" md="12">
     <v-file-input v-model="selectedFile" multiple show-size outlined label="File input"></v-file-input>
   </v-col>
   <v-col cols="12" sm="12" md="12">
     <v-textarea label="Description"></v-textarea>
   </v-col>
 </v-row>
</v-form>

我在方法中的上传功能：


uploadFile: function(){

   console.log(this.selectedFile)

   var self = this

   const formData = new FormData()

   let config = {
      header : {
         'Content-Type' : 'multipart/form-data'
      }
   }

   formData.append('file', this.selectedFile)

   axios.post('/file/upload', formData, config)
     .then(response => {
       console.log(response)
   })
}

这是我的后端控制器：


class FileController extends BaseController {

    public function create(Request $request, Response $response) {

        $directory = $this->container->get('upload_directory');
        $uploadedFiles = $request->getUploadedFiles();

        foreach ($uploadedFiles['file'] as $uploadedFile) {
            if ($uploadedFile->getError() === UPLOAD_ERR_OK) {
                $filename = Upload::moveUploadedFile($directory, $uploadedFile);
                $response->getBody()->write('Uploaded: ' . $filename . '<br/>');
            }
        }
    
        return $response;
    
    }

}

这是我得到的响应，我得到状态 200，好的，但是当它应该被上传时数据是空的，我是如何在我的后端控制器中建立它的。

对象配置：{url：“/file/upload”，方法：“post”，数据：FormData，标题：{...}，transformRequest：Array（1），...}数据：“”标题：{cache-control：“ no-store, no-cache, must-revalidate”，连接：“Keep-Alive”，内容长度：“0”，内容类型：“text/html; charset=UTF-8”，日期：“星期三， 2020 年 10 月 14 日 18:47:47 GMT"，...} 请求：XMLHttpRequest {readyState：4，超时：0，withCredentials：false，上传：XMLHttpRequestUpload，onreadystatechange：ƒ，...} 状态：200 statusText：“OK” 原型：对象

4

1 回答 1

0

Axios 将响应数据存储在response.data. 你应该 console.log 那个，而不是response.

其他几点：

  • 不能使用变量名formData，因为它会造成混淆。变量名应该更具描述性；
  • 从您粘贴的代码来看var self = this似乎没用。当使用function()而不是箭头函数来保持对 Vue 上下文的引用时，通常会这样做；
  • ifselectedFile是一个文件数组，除了是一个误导性的名称之外，您还应该遍历数组并将每个文件添加到 FormData 对象。像这样的东西：
    this.selectedFile.forEach(el => {
    formData.append('file[]', el);
    });

file[]帮助 PHP 理解它应该创建一个名为file. file实际上应该在files语义上是正确的。

于 2020-10-14T20:52:18.550 回答