Question

我正在尝试上传文件（文件可以是任何文件，即图像，pdf或doc，绝对可以）。为此，我在下面的Vue组件中制作了一个测试表单

<form class="mt-5" method="post" enctype="multipart/form-data" id="uploadForm">
        <div class="form-group">
            <input type="file" id="test" name="test" class="form-control">
        </div>
        <button @click.prevent="uploadFile" type="button" class="btn btn-sm btn-primary">Upload</button>
</form>

现在，当我提交表单（单击上传按钮）时，我正在下面运行一个函数

uploadFile() {
                let something = $('#test').prop('files')[0];
                console.log(something);
                let form_data = new FormData();
                form_data.append('file', something);
                console.log(form_data);
                axios.post('/upload/file', { form_data })
                    .then(() => {
                        console.log("done");
                    })
            },

因此，当我console.log(something)时，它显示了上载文件的信息，但是当我使用axios和dd($request->all())将数据发送到服务器时，它向我显示了something => []一个空数组，即意味着，我没有得到文件，因此无法进一步处理它以将其保存到我的文件夹中（上传）。

我在做什么错了？

Answer 1

之所以会发生这种情况，是因为在使用axios发出请求时，没有将标头Content-Type设置为multipart/form-data（默认情况下，正在使用application / json），并且enctype属性无效，因为您未使用默认表单提交操作。因此，请尝试在post方法中传递第三个参数，并指定正确的Content-Type标头。

const uploadAvatar = ({ id, file }) => {
  const formData = new FormData();

  formData.append('avatar', file);

  return axios.post(`users/${id}/avatar`, formData, {
    headers: { 'Content-Type': 'multipart/form-data' },
  });
};

无法使用Vue前端和laravel服务器上传文件

1 个答案: