php+mysql网站开发全程实例pdf灵犀科技网站开发

  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