Question

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

这是我的查证表：

<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，确定，但是应该将其上传时数据为空，这是我在后端控制器中如何建立的。

对象 config：{url：“ / file / upload”，方法：“ post”，数据：FormData，标头：{…}，transformRequest：Array（1），…} 数据：“” 标头：{cache-control：“无存储，no-cache，必须重新验证”，连接：“ Keep-Alive”，内容长度：“ 0”，内容类型：“ text / html； charset = UTF- 8”，日期：“ 2020年10月14日，星期三，格林尼治标准时间”，…} 请求：XMLHttpRequest {readyState：4，超时：0，withCredentials：false，上传：XMLHttpRequestUpload，onreadystatechange：ƒ，…} 状态：200 statusText：“确定” 原始：对象

Answer 1

Axios将响应数据存储在response.data中。您应该使用console.log代替response。

其他几点：

不能使用变量名formData，因为它会引起混淆。变量名称应更具描述性；

var self = this

似乎没有用。通常在使用function()而不是箭头函数来保留对Vue上下文的引用时会这样做；
如果selectedFile是一个文件数组，除了是一个具有误导性的名称外，您还应循环遍历该数组并将每个文件添加到FormData对象中。像这样：

    this.selectedFile.forEach(el => {
    formData.append('file[]', el);
    });

file[]帮助PHP理解它应该创建一个名称为file的文件数组。并且file实际上应该是files，以便在语义上正确。

无法在后端Slim 4中访问formData

1 个答案: