1. 首先，在项目
中安装
element-
ui和axios：
```
npm install
element-
ui axios --save
```
2. 在main.js
中引入
element-
ui和axios：
```
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. 在组件
中使用上传组件：
```
<template>
<div>
<el-upload
class="avatar-uploader"
action="/api/upload"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="beforeUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
```
4. 在组件
中定义上传前和上传成功的
方法：
```
<script>
export
default {
data() {
return {
imageUrl: ''
}
},
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
if (!isJPG && !isPNG) {
this.$message.error('只能上传jpg或png格式的图片')
return false
}
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('上传的图片大小不能超过2MB')
return false
}
return true
},
handleSuccess(response) {
this.imageUrl = response.data.url
}
}
}
</script>
```
5. 在服务器端，需要接收上传的图片，并将其保存到指定路径：
```
const express = req
uire('express')
const multer = req
uire('multer')
const path = req
uire('path')
const app = express()
const storage = multer.diskStorage({
destination:
function (req, file, cb) {
cb(null, path.join(__dirname, '/public/images'))
},
filename:
function (req, file, cb) {
const extname = path.extname(file.originalname)
cb(null, Date.now() + extname)
}
})
const upload = multer({ storage: storage })
app.post('/api/upload', upload.single('file'), (req, res) => {
const url = `http://localhost:3000/images/${req.file.filename}`
res.json({
code: 0,
data: {
url: url
}
})
})
app.listen(3000, () => {
console.log('server is running at http://localhost:3000')
})
```
以上就是在
Vue中使用element-
ui的上传组件上传图片的
方法。
7486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
