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 = req
uire('express')
const multer = req
uire('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 = req
uire('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
```
完整代码如下：
```javascript
const express = req
uire('express')
const multer = req
uire('multer')
const bodyParser = req
uire('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的上传组件时，需要设置上传的文件类型和大小限制，但是这只是客户端的限制，如果后端没有做相应的处理，仍然可以上传非指定类型和大小的文件，因此，在后端接口中也需要对上传的文件进行相应的限制。
2259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
