目录
一、使用Vue实现文件上传
1.安装依赖（如果使用 Vue CLI 创建的项目，可能已经包含所需依赖）：
2.创建Vue组件：
二、使用JQuery实现文件上传
1.创建HTML结构：
2.引入JQuery:
3.添加JavaScript代码：
前端开发过程中，经常遇到要开发文件上传的功能。在此介绍下通过Vue和JQuery分别实现文件上传的功能。
一、使用Vue实现文件上传
1.安装依赖（如果使用 Vue CLI 创建的项目，可能已经包含所需依赖）：
axios（用于发送请求）
2.创建Vue组件：
<template><div><input type="file" @change="handleFileUpload" /><p v-if="uploading">正在上传...</p><p v-if="uploadSuccess">上传成功！</p><p v-if="uploadError">上传失败！</p></div>
</template><script>
import axios from 'axios';export default {data() {return {uploading: false,uploadSuccess: false,uploadError: false};},methods: {handleFileUpload(event) {this.uploading = true;this.uploadSuccess = false;this.uploadError = false;const file = event.target.files[0];const formData = new FormData();formData.append('file', file);axios.post('/upload-api-url', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {this.uploading = false;this.uploadSuccess = true;}).catch(error => {this.uploading = false;this.uploadError = true;console.error(error);});}}
};
</script>这个组件是先在data中定义上传变量，给文件输入框<input>绑定handleFileUpload（）方法。当文件输入框中的文件发生变化时，触发handLeFileUpload（）方法。
handLeFileUpload（）方法中，先设置状态为正在上传，并清除成功和失败状态。然后声明file 变量接收文件，文件通过event.target.files[0]获取。之后创建FormData对象调用其appen()方法添加文件。
接下来使用axios发送 POST 请求到指定的上传接口，设置请求头为multipart/form-data以支持文件上传。
最后，根据请求的结果来更新状态。
二、使用JQuery实现文件上传
1.创建HTML结构：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><input type="file" id="fileInput"><button id="uploadButton">上传</button><p id="uploadStatus"></p>
</body></html>2.引入JQuery:
确保在页面中引入 jQuery，可以通过以下方式引入:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>3.添加JavaScript代码：
$(document).ready(function() {$('#uploadButton').on('click', function() {const fileInput = $('#fileInput')[0];const file = fileInput.files[0];const formData = new FormData();formData.append('file', file);$.ajax({url: '/upload-api-url',type: 'POST',data: formData,contentType: false,processData: false,beforeSend: function() {$('#uploadStatus').text('正在上传...');},success: function(response) {$('#uploadStatus').text('上传成功！');},error: function(error) {$('#uploadStatus').text('上传失败！');console.error(error);}});});
});这里的实现思路是：
当页面加载完成后，为上传按钮绑定点击事件。
获取文件输入框元素和选中的文件。
创建FormData对象并添加文件。
使用 jQuery 的ajax方法发送 POST 请求到指定的上传接口。
设置contentType为false和processData为false，以确保正确处理文件上传。
在请求发送前，显示正在上传的状态。
根据请求的结果更新页面上的上传状态文本。
实际项目中，文件引入、安装依赖等步骤不太需要，看看实现思路和获取选中文件的方式及上传文件的格式就好。
另外，如果对前端开发设计模式感兴趣的话，可以点击右下角专栏目录查看设计模式相关文章，有助于进一步提高代码水平。码字不易，点个赞再走吧
