1. 安装
element-ui和axios
```
npm install
element-ui axios
```
2. 在main.js
中引入
element-ui和axios
```javascript
import
Vue from '
vue'
import
ElementUI from '
element-ui'
import '
element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
Vue.use(
ElementUI)
Vue.prototype.$axios = axios
```
3. 在
组件中使用el-
upload组件
```html
<template>
<div>
<el-
upload
class="
upload-demo"
action="/api/
upload"
:on-success="handleSuccess"
:before-
upload="before
Upload"
:headers="{Authorization: token}">
<el-button size="small" type="primary">点击
上传</el-button>
<div slot="tip" class="el-
upload__tip">只能
上传jpg/png文件，且不超过500kb</div>
</el-
upload>
</div>
</template>
```
其
中，action是
上传的接口地址，on-success是
上传成功后的回调函数，before-
upload是
上传前的钩子函数，headers是
请求头部，可以传递token等信息。
4. 在methods
中定义handleSuccess和before
Upload函数
```javascript
methods: {
handleSuccess(response, file, fileList) {
console.log(response)
// 在这里处理
上传成功后的响应数据
},
before
Upload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt500K = file.size / 1024 < 500
if (!isJPG) {
this.$message.error('
上传图片只能是 JPG/PNG 格式!')
}
if (!isLt500K) {
this.$message.error('
上传图片大小不能超过 500KB!')
}
return isJPG && isLt500K
}
}
```
在before
Upload函数
中，可以对
上传的图片进行格式、大小等限制。
5. 在
后端接口
中处理
上传的图片
在
后端接口
中，可以使用express框架的multer
中间件来处理
上传的图片。安装multer：
```
npm install multer
```
在express
中引入multer，并设置
上传的文件夹：
```javascript
const express = require('express')
const multer = require('multer')
const app = express()
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '
uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.jpg')
}
})
const
upload = multer({ storage: storage })
app.post('/api/
upload',
upload.single('file'), (req, res) => {
console.log(req.file)
// 在这里处理
上传成功后的响应数据
})
```
在这里，
上传的文件会被保存到
uploads文件夹下，文件名会以字段名和时间戳命名。
注意：在使用express
中间件处理
上传文件时，需要使用body-parser
中间件。安装body-parser：
```
npm install body-parser
```
在express
中引入body-parser：
```javascript
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
```
完整代码如下：
```javascript
const express = require('express')
const multer = require('multer')
const bodyParser = require('body-parser')
const app = express()
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '
uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.jpg')
}
})
const
upload = multer({ storage: storage })
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.post('/api/
upload',
upload.single('file'), (req, res) => {
console.log(req.file)
// 在这里处理
上传成功后的响应数据
})
app.listen(3000, () => console.log('Server is running...'))
```
注意：在使用
element-ui的
上传组件时，需要设置
上传的文件类型和大小限制，但是这只是客户端的限制，如果
后端没有做相应的处理，仍然可以
上传非指定类型和大小的文件，因此，在
后端接口
中也需要对
上传的文件进行相应的限制。
扫一扫
1669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
