目录

一、使用Vue实现文件上传

1.安装依赖（如果使用 Vue CLI 创建的项目，可能已经包含所需依赖）：

2.创建Vue组件：

二、使用JQuery实现文件上传

1.创建HTML结构：

   2.引入JQuery:

3.添加JavaScript代码：

前端开发过程中，经常遇到要开发文件上传的功能。在此介绍下通过Vue和JQuery分别实现文件上传的功能。

一、使用Vue实现文件上传

1.安装依赖（如果使用 Vue CLI 创建的项目，可能已经包含所需依赖）：

        <code>axios（用于发送请求）

2.创建Vue组件：

<template>

<div>

<input type="file" @change="handleFileUpload" />code>

<p v-if="uploading">正在上传...</p>code>

<p v-if="uploadSuccess">上传成功！</p>code>

<p v-if="uploadError">上传失败！</p>code>

</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实现文件上传