前端文件上传的实现方式
目录
1.安装依赖（如果使用 Vue CLI 创建的项目，可能已经包含所需依赖）：
前端开发过程中，经常遇到要开发文件上传的功能。在此介绍下通过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，以确保正确处理文件上传。
在请求发送前，显示正在上传的状态。
根据请求的结果更新页面上的上传状态文本。
实际项目中，文件引入、安装依赖等步骤不太需要，看看实现思路和获取选中文件的方式及上传文件的格式就好。
另外，如果对前端开发设计模式感兴趣的话，可以点击右下角专栏目录查看设计模式相关文章，有助于进一步提高代码水平。码字不易，点个赞再走吧
原文地址：https://blog.csdn.net/jxnd123456/article/details/142987909
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！