vue3 - element-plus 上传各种 word pdf 文件、图片视频并上传到服务器功能效果，示例代码开箱即用。

**Vue3 + Element-Plus上传文件功能**

在实际开发中，我们经常需要实现文件上传的功能。Element-Plus 提供了一个方便易用的 `ElUpload` 组件，可以轻松地实现各种类型文件的上传功能。在本文中，我们将展示如何使用 Vue3 和 Element-Plus 实现 word、pdf 文件、图片和视频的上传功能。

###依赖安装首先，需要在项目中安装必要的依赖：

bashnpm install element-plus @element-plus/icons-vue axios

javascriptimport { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import enUSLocale from 'element-plus/lib/locale/lang/en-US'
import zhCNLocale from 'element-plus/lib/locale/lang/zh-CN'

const app = createApp(App)

app.use(ElementPlus, {
 locale: {
 enUS: enUSLocale,
 zhCN: zhCNLocale }
})

app.mount('#app')

vue<template>
 <div class="upload-file">
 <el-upload :action="uploadUrl"
 list-type="picture-card"
 :on-preview="handlePreview"
 :on-remove="handleRemove"
 :on-change="handleChange"
 :file-list="fileList"
 :limit="3"
 :auto-upload="false"
 :multiple="true">
 <i class="el-icon-plus" />
 </el-upload>
 </div>
</template>

<script>
export default {
 name: 'UploadFile',
 data() {
 return {
 fileList: []
 }
 },
 computed: {
 uploadUrl() {
 //上传地址 return '/api/upload'
 }
 },
 methods: {
 handlePreview(file) {
 console.log(file)
 },
 handleRemove(file, fileList) {
 console.log(fileList)
 },
 handleChange(file, fileList) {
 this.fileList = fileList }
 }
}
</script>

<style scoped>
.upload-file {
 margin-top:20px;
}
</style>

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

const app = express()

//上传配置const upload = multer({
 dest: './uploads/', //上传目录 limits: { fileSize:10 *1024 *1024 } // 文件大小限制})

app.post('/api/upload', upload.array('file'), (req, res) => {
 const files = req.files if (!files || files.length ===0) {
 return res.status(400).send({ message: '请上传文件' })
 }

 files.forEach((file) => {
 console.log(file)
 })

 res.send({ message: '上传成功' })
})

app.listen(3000, () => {
 console.log('Server listening on port3000')
})