文件上传：原生input、组件ant-desgin-vue(通过某个按钮进行上传操作)

**文件上传**

在前端开发中，文件上传是非常常见的需求。有很多种方式可以实现文件上传，下面我们将分别介绍原生input、组件ant-design-vue两种方法。

### 原生input####1. HTML结构首先，我们需要在HTML结构中添加一个input标签，并设置其type属性为file。

html<input type="file" id="fileInput">

####2. JavaScript代码接下来，我们可以使用JavaScript来处理文件上传。我们需要监听input标签的change事件，获取选择的文件，然后发送请求进行上传。

javascriptconst fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (e) => {
 const file = e.target.files[0];
 // 发送请求进行上传 uploadFile(file);
});

function uploadFile(file) {
 const formData = new FormData();
 formData.append('file', file);

 fetch('/upload', {
 method: 'POST',
 body: formData,
 })
 .then((response) => response.json())
 .then((data) => console.log(data))
 .catch((error) => console.error(error));
}

####3. 后端代码最后，我们需要在后端中处理上传的文件。我们可以使用Node.js和Express框架来实现。

javascriptconst express = require('express');
const multer = require('multer');

const app = express();

const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
 const file = req.file;
 // 处理上传的文件 console.log(file);
 res.send('File uploaded successfully!');
});

### 组件ant-design-vue####1. HTML结构首先，我们需要在HTML结构中添加一个Upload组件。

html<template>
 <div>
 <a-upload :before-upload="handleBeforeUpload"
 @change="handleChange"
 />
 </div>
</template>

<script>
import { Upload } from 'ant-design-vue';

export default {
 components: { Upload },
 methods: {
 handleBeforeUpload(file) {
 console.log(file);
 return true;
 },
 handleChange(info) {
 if (info.file.status === 'done') {
 console.log(info.file.response);
 }
 },
 },
};
</script>

####2. JavaScript代码接下来，我们可以使用JavaScript来处理文件上传。我们需要监听Upload组件的change事件，获取选择的文件，然后发送请求进行上传。

javascriptimport { Upload } from 'ant-design-vue';

export default {
 components: { Upload },
 methods: {
 handleBeforeUpload(file) {
 console.log(file);
 return true;
 },
 handleChange(info) {
 if (info.file.status === 'done') {
 console.log(info.file.response);
 }
 },
 },
};

####3. 后端代码最后，我们需要在后端中处理上传的文件。我们可以使用Node.js和Express框架来实现。

javascriptconst express = require('express');
const multer = require('multer');

const app = express();

const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
 const file = req.file;
 // 处理上传的文件 console.log(file);
 res.send('File uploaded successfully!');
});

**总结**

在本文中，我们分别介绍了原生input和组件ant-design-vue两种方式来实现文件上传。我们需要注意的是，后端代码需要根据具体需求进行修改。

**参考资料**

* [原生input]( />* [组件ant-design-vue]( />* [Node.js和Express框架](