ElementUI文件上传及服务器接口配置

旧城等待， 2022-12-14 03:34 334阅读 0赞

# 后台服务器的搭建 #

### 入口文件 ###

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> //server.js const express = require('express') const app = express() const PORT = 4000 //引入路由 &nbsp;&nbsp;文件上传对应的路由 const upload = require('./upload') //x-powered-by显示后台能使用哪种语言编写 app.disabled('x-powered-by'); //extended: false：表示使用系统模块querystring来处理，也是官方推荐的 //extended:tru：表示使用第三方模块qs来处理 app.use(express.urlencoded({ extended: true })); app.use(upload) app.listen(PORT, (err) =&gt; { if (!err) { console.log(`服务器启动了，地址为：http://localhost:${PORT}`) } }) </td> 
 </tr> 
 </tbody> 
</table>

### 路由 ###

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> var express = require('express'); var router = express.Router(); var fs = require('fs'); //引入multer处理文件 var multer &nbsp;= require('multer'); // 使用硬盘存储模式设置存放接收到的文件的路径以及文件名 var storage = multer.diskStorage({ &nbsp; &nbsp; destination: function (req, file, cb) { &nbsp; &nbsp; &nbsp; &nbsp; // 接收到文件后输出的保存路径（若不存在则需要创建） &nbsp; &nbsp; &nbsp; &nbsp; cb(null, 'upload/'); &nbsp; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; //filename用于确定文件夹中的文件名的确定 &nbsp; &nbsp; filename: function (req, file, cb) { &nbsp; &nbsp; &nbsp; &nbsp; // 将保存文件名设置为 时间戳 + 文件原始名，比如 151342376785-123.jpg &nbsp; &nbsp; &nbsp; &nbsp; cb(null, Date.now() + "-" + file.originalname); &nbsp; &nbsp; &nbsp; } }); &nbsp; // 创建文件夹 var createFolder = function(folder){ &nbsp; &nbsp; try{ &nbsp; &nbsp; &nbsp; &nbsp; // 测试 path 指定的文件或目录的用户权限,我们用来检测文件是否存在 &nbsp; &nbsp; &nbsp; &nbsp; // 如果文件路径不存在将会抛出错误"no such file or directory" &nbsp; &nbsp; &nbsp; &nbsp; fs.accessSync(folder);&nbsp; &nbsp; &nbsp; }catch(e){ &nbsp; &nbsp; &nbsp; &nbsp; // 文件夹不存在，以同步的方式创建文件目录。 &nbsp; &nbsp; &nbsp; &nbsp; fs.mkdirSync(folder); &nbsp; &nbsp; } &nbsp; }; &nbsp; var uploadFolder = './upload/'; createFolder(uploadFolder); &nbsp; // 创建 multer 对象 var upload = multer({ storage: storage }); &nbsp; /* POST upload listing. */ router.post('/post', upload.single('file'), function(req, res, next) { &nbsp; &nbsp; var file = req.file; &nbsp; &nbsp; console.log('文件类型：%s', file.mimetype); &nbsp; &nbsp; console.log('原始文件名：%s', file.originalname); &nbsp; &nbsp; console.log('文件大小：%s', file.size); &nbsp; &nbsp; console.log('文件保存路径：%s', file.path); &nbsp; &nbsp; // 接收文件成功后返回数据给前端 &nbsp; &nbsp; res.json({res_code: '0'}); }); &nbsp; // 导出模块（在 app.js 中引入） module.exports = router; </td> 
 </tr> 
 </tbody> 
</table>

express服务器对于后台文件的处理需引入第三方中间件multer

**安装multer：npm install --save multer**

# ElementUI( Upload )实现文件上传 #

Vue-cli@2.0 版本脚手架使用npm i element-ui –S

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> 在main.js文件中 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; </td> 
 </tr> 
 </tbody> 
</table>

Vue-cli@3.0版本脚手架需使用vue add element   文件会自动引入main.js文件

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> 在*/.vue文件中 &lt;template&gt; &nbsp; &lt;div id="app"&gt; &nbsp; &nbsp; &lt;el-upload &nbsp; &nbsp; &nbsp; class="upload-demo" &nbsp; &nbsp; &nbsp; action="/api/post"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //&nbsp; /api是因为配置了服务器代理 &nbsp; &nbsp; &nbsp; :on-preview="handlePreview" &nbsp; &nbsp; &nbsp; :on-remove="handleRemove" &nbsp; &nbsp; &nbsp; :before-remove="beforeRemove" &nbsp; &nbsp; &nbsp; multiple &nbsp; &nbsp; &nbsp; :limit="3" &nbsp; &nbsp; &nbsp; :on-exceed="handleExceed" &nbsp; &nbsp; &gt; &nbsp; &nbsp; &nbsp; &lt;el-button size="small" type="primary"&gt;点击上传&lt;/el-button&gt; &nbsp; &nbsp; &nbsp; &lt;div slot="tip" class="el-upload__tip"&gt;只能上传jpg/png文件，且不超过500kb&lt;/div&gt; &nbsp; &nbsp; &lt;/el-upload&gt; &nbsp; &lt;/div&gt; &lt;/template&gt; &nbsp; &lt;script&gt; export default { &nbsp; data() { &nbsp; &nbsp; return { &nbsp; &nbsp; }; &nbsp; }, &nbsp; methods: { &nbsp; &nbsp; handleRemove(file, fileList) { &nbsp; &nbsp; &nbsp; console.log(file, fileList); &nbsp; &nbsp; }, &nbsp; &nbsp; handlePreview(file) { &nbsp; &nbsp; &nbsp; console.log(file); &nbsp; &nbsp; }, &nbsp; &nbsp; handleExceed(files, fileList) { &nbsp; &nbsp; &nbsp; this.$message.warning( &nbsp; &nbsp; &nbsp; &nbsp; `当前限制选择 3 个文件，本次选择了 ${ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; files.length &nbsp; &nbsp; &nbsp; &nbsp; } 个文件，共选择了 ${files.length + fileList.length} 个文件` &nbsp; &nbsp; &nbsp; ); &nbsp; &nbsp; }, &nbsp; &nbsp; beforeRemove(file, fileList) { &nbsp; &nbsp; &nbsp; return this.$confirm(`确定移除 ${file.name}？`); &nbsp; &nbsp; }, &nbsp; } }; &lt;/script&gt; &nbsp; &lt;style lang='stylus'&gt;&lt;/style&gt; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>