这里主要介绍如何使用 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);
  })
},

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

Logo

前往低代码交流专区

更多推荐