vue 使用 axios 提交表单数据(含 FormData 上传文件)

       这里主要介绍如何使用 formData 对象上传文件。FormData 是 XMLHttpRequest Level 2 新增的一个对象,用来提交表单,其最大的优势是上传二进制文件。

<!--文件上传表单-->
<form>
  <input type="text" value="" v-model="name" placeholder="请输入用户名">
  <input type="text" value="" v-model="age" placeholder="请输入年龄">
  <input type="file" @change="getFile($event)">
  <button @click="submit($event)">提交</button>
</form>

获取上传文件:

getFile(event) {
  this.file = event.target.files[0];
},

提交表单事件:

submit(event) {
  event.preventDefault();//取消默认行为
  //创建 formData 对象
  let formData = new FormData();
  // 向 formData 对象中添加文件
  formData.append('name', this.name);
  formData.append('age', this.age);
  formData.append('file',this.file);
  formData.append('file1',this.file1);

  http.uploadFile("taskManage/uploadFile2",formData).then(function (response) {
    console.log("res: ",response);
  })
},

上传单文件和多文件其实都是一样,主要的区别在后台接受文件形式和前台如何向后台传递数据

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueAxios可以用于提交带有文件的表单数据。以下是一个简单的示例: 首先,导入Vueaxios: ``` import Vue from 'vue'; import axios from 'axios'; ``` 然后,在Vue实例中创建一个方法用来处理表单提交: ``` methods: { submitForm() { // 创建一个 FormData 对象 let formData = new FormData(); // 获取文件输入框的文件 let file = this.$refs.fileInput.files[0]; // 将文件添加到 FormData 对象中 formData.append('file', file); // 使用 axios 发送 POST 请求,将 FormData 对象作为数据传递 axios.post('/api/submit', formData) .then(response => { // 处理成功的响应 console.log(response); }) .catch(error => { // 处理错误的响应 console.error(error); }); } } ``` 在上面的代码中,我们首先创建了一个FormData对象,然后通过获取文件输入框中的文件并将其添加到FormData对象中。接下来,使用axios的post方法发送POST请求,并将FormData对象作为数据传递。然后,根据返回的响应进行相关处理。 需要注意的是,上述代码中的`this.$refs.fileInput`表示引用了一个具有`ref="fileInput"`属性的文件输入框,可以通过该引用来获取文件。 最后,在HTML模板中添加一个表单,并调用submitForm方法来提交表单: ``` <form @submit="submitForm"> <input type="file" ref="fileInput" /> <button type="submit">提交</button> </form> ``` 在上述代码中,我们监听了表单的submit事件,并在事件发生时调用submitForm方法。 以上就是使用VueAxios提交带有文件的表单数据的简单示例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值