1
. 安装
element-ui和axios
```
npm install
element-ui axios
```
2
. 在main
.js中引入
element-ui和axios
```
javascript
import
Vue from &#
39;
vue&#
39;
import
ElementUI from &#
39;
element-ui&#
39;
import &#
39;
element-ui/lib/theme
-chalk/index
.css&#
39;
import axios from &#
39;axios&#
39;
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="beforeUpload"
: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和beforeUpload函数
```
javascript
methods: {
handleSuccess(response, file, fileList) {
console
.log(response)
// 在这里处理上传成功后的响应
数据
},
beforeUpload(file) {
const isJPG = file
.type === &#
39;image/jpeg&#
39; || file
.type === &#
39;image/png&#
39;
const isLt500K = file
.size / 1024 < 500
if (!isJPG) {
this
.$message
.error(&#
39;上传图片只能是 JPG/PNG 格式!&#
39;)
}
if (!isLt500K) {
this
.$message
.error(&#
39;上传图片大小不能超过 500KB!&#
39;)
}
return isJPG && isLt500K
}
}
```
在beforeUpload函数中，可以对上传的图片进行格式、大小等限制。
5
. 在
后端接口中处理上传的图片
在
后端接口中，可以
使用express框架的multer中间件来处理上传的图片。安装multer：
```
npm install multer
```
在express中引入multer，并设置上传的文件夹：
```
javascript
const express = req
uire(&#
39;express&#
39;)
const multer = req
uire(&#
39;multer&#
39;)
const app = express()
const storage = multer
.diskStorage({
destination: function (req, file, cb) {
cb(null, &#
39;uploads/&#
39;)
},
filename: function (req, file, cb) {
cb(null, file
.fieldname + &#
39;
-&#
39; + Date
.now() + &#
39;
.jpg&#
39;)
}
})
const upload = multer({ storage: storage })
app
.post(&#
39;/api/upload&#
39;, upload
.single(&#
39;file&#
39;), (req, res) => {
console
.log(req
.file)
// 在这里处理上传成功后的响应
数据
})
```
在这里，上传的文件会被保存到uploads文件夹下，文件名会以字段名和时间戳命名。
注意：在
使用express中间件处理上传文件时，需要
使用body
-parser中间件。安装body
-parser：
```
npm install body
-parser
```
在express中引入body
-parser：
```
javascript
const bodyParser = req
uire(&#
39;body
-parser&#
39;)
app
.use(bodyParser
.urlencoded({ extended: false }))
app
.use(bodyParser
.json())
```
完整代码如下：
```
javascript
const express = req
uire(&#
39;express&#
39;)
const multer = req
uire(&#
39;multer&#
39;)
const bodyParser = req
uire(&#
39;body
-parser&#
39;)
const app = express()
const storage = multer
.diskStorage({
destination: function (req, file, cb) {
cb(null, &#
39;uploads/&#
39;)
},
filename: function (req, file, cb) {
cb(null, file
.fieldname + &#
39;
-&#
39; + Date
.now() + &#
39;
.jpg&#
39;)
}
})
const upload = multer({ storage: storage })
app
.use(bodyParser
.urlencoded({ extended: false }))
app
.use(bodyParser
.json())
app
.post(&#
39;/api/upload&#
39;, upload
.single(&#
39;file&#
39;), (req, res) => {
console
.log(req
.file)
// 在这里处理上传成功后的响应
数据
})
app
.listen(
3000, () => console
.log(&#
39;Server is running
...&#
39;))
```
注意：在
使用element-ui的上传
组件时，需要设置上传的文件类型和大小限制，但是这只是客户端的限制，如果
后端没有做相应的处理，仍然可以上传非指定类型和大小的文件，因此，在
后端接口中也需要对上传的文件进行相应的限制。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
