我需要通过Axios将一个文件从客户端发布到服务器.

以下是我的Vuejs代码:

methods: {
    'successUpload': function (file) {
        const config = { headers: { 'Content-Type': 'multipart/form-data' } };
        axios.post('/Upload/File',file, config).then(function (response) {
            console.log(response.data);
        });
    }
}

这是我处理已发送文件的Laravel代码:

public function uploadFile(Request $request)
{
    if($request->hasFile('file'))
      return "It's a File";

    return "No! It's not a File";
}

但它总是返回No It's not a File.

任何帮助都将不胜感激.

推荐答案

必须创建FormData对象并附加图像文件.

methods: {
  'successUpload': function (file) {

    let data = new FormData();
    data.append('file', document.getElementById('file').files[0]);

    axios.post('/Upload/File',data).then(function (response) {
        console.log(response.data);
    });
  }
}

例如here.

如果有效,请告诉我.

Vue.js相关问答推荐

Vue CDN的html工作,但v—如果不工作

Vuejs 和 Laravel 发布请求 CORS

确保在渲染组件之前加载 Vuex 状态

如何在 vue.js 中删除类

在按键 vuejs 中只允许数字和一个小数点后 2 位限制

使用 vee-validate 在 vue js 中进行验证有错误

事件 click点击的无效处理程序:未定义

如何在nuxt路由中添加meta?

Vue.js 如果在视图中

Vue.js:从 parent父Vue 获取数据

这是 v-on:change 的正确用法吗?

Vue 组件中的组件渲染函数中可能存在无限更新循环警告

如何在 vuetify 中将工具提示添加到数据表标题?

如何从 vue-apollo 中访问 this.$route?

异步api调用后如何使用vuex getter

Vue Chart.js - 条形图上的简单点/线

Vue.js 中的 CSS 框架

使用 Vee-validate 禁用按钮,直到正确填写表单

使用 svelte js 的原因

使用 vue.js 获取调用元素