Vue 使用 axios 框架,系列文章:
《Vue使用axios实现Ajax请求》
《Vue使用axios二次封装、解决跨域问题》
《Vue使用axios实现:上传文件、下载文件》
在实际开发过程中,浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。Axios 提供了一些方便的方法来上传文件,包括使用 FormData、设置 Content-Type 为 multipart/form-data 等。
文件上传是将本地计算机中的文件发送到服务器的过程。在前端开发中,通常使用 <input type="file"> 元素来实现文件选择功能。用户通过点击这个元素,选择需要上传的文件。然后,前端代码将选中的文件传递给后端服务器。
1、上传文件
使用 FormData 对象,FormData 是一个用于创建表单数据的 API,可用于发送包含文件和其他表单数据的 multipart/form-data 请求。这是处理文件上传的常用方法。通过FormData对象,可以将文件数据添加到表单中,然后使用 Axios 的 post 或 put 方法发送请求。
(1)前端代码:使用 Vue 编写前端脚本
<template>
<!-- 通过表单提交方式:<form name="myForm" action="http://127.0.0.1:8081/uploadFile" method="post" enctype="multipart/form-data"> -->
<form name="myForm" method="post" enctype="multipart/form-data" v-on:submit.prevent="uploadFileStatement()">
上传文件:<input type="file" name="fil