vue实现文件上传

文件上传是web开发中一个常见的需求，Vue.js作为一款流行的前端框架，也提供了方便的方法来实现文件上传功能。在此，将详细讲解Vue.js如何实现文件上传。 首先，我们需要准备一个简单的html页面来接收上传文件。下面是示例代码：

<div id="app">
<input type="file" ref="fileInput" @change="uploadFile">
<button @click="submit"></button>
<div v-if="uploadProgress">上传进度: {{ uploadProgress }}%</div>
</div>

可以看到，我们在页面上放置了一个 `input` 标签和一个上传按钮。当我们选择文件后，会触发 `uploadFile` 方法来处理上传文件的逻辑。同时，我们还展示了上传进度。 接下来，我们需要在Vue实例中实现上传文件的逻辑。我们可以使用 `FormData` 对象来上传文件。下面是示例代码：

new Vue({
el: '#app',
data: {
uploadProgress: 0,
file: null
},
methods: {
uploadFile(event) {
this.file = event.target.files[0];
},
submit() {
const formData = new FormData();
formData.append('file', this.file);
axios.post('/api/upload', formData, {
onUploadProgress: progressEvent =>{
this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
}
}).then(response =>{
console.log(response);
});
}
}
})

在代码中，我们首先监听 `uploadFile` 方法，将选择的文件保存在 `file` 变量中。接下来，我们在 `submit` 方法中使用 `FormData` 对象来将文件上传到服务器。同时，我们使用 `axios` 库来发送POST请求，并监听上传进度来在页面上展示。 最后，我们需要在服务器端接收文件并进行处理。在此，我们假设我们使用了Node.js和Express框架来处理上传文件。下面是示例代码：

const express = require('express');
const app = express();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
app.post('/api/upload', upload.single('file'), (req, res) =>{
console.log(req.file);
res.json({ message: '上传成功' });
});
app.listen(3000, () =>{
console.log('服务器已启动');
});

我们使用 `multer` 库来处理上传文件，设置上传目录为 `uploads/`。然后，我们在路由中监听POST请求，并使用 `upload.single` 方法来处理上传文件。最后，我们将上传成功的消息返回给前端页面。 这样一来，我们就完成了一个简单的文件上传功能的实现。在实际开发过程中，我们可以根据实际需求来进行优化和修改。

 

参考文章：http://blog.ncmem.com/wordpress/2023/11/09/vue%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论