使用vue3+Element-UI写一个图片上传 照片墙样式
时间: 2024-01-15 15:03:06 浏览: 125
vue+elementUI实现图片上传功能
好的,我可以给你提供一个简单的代码示例,你可以根据自己的需求进行修改。
首先,你需要在你的Vue项目中安装Element-UI:
```
npm install element-ui
```
然后,在你的Vue组件中引入Element-UI和CSS文件:
```
<template>
<div>
<el-upload
class="upload-demo"
action="//jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:on-success="handleUploadSuccess"
:file-list="fileList"
:auto-upload="false">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">jpg/png文件,不超过2MB</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
import { ElUpload, ElButton, ElDialog } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export default {
components: {
ElUpload,
ElButton,
ElDialog
},
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
fileList: [
{
name: 'food.jpeg',
url: 'https://www.baidu.com/img/flexible/logo/pc/result.png'
}
]
}
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList)
},
handlePreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!')
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!')
}
return isJPG && isLt2M
},
handleUploadSuccess(response, file, fileList) {
console.log(response, file, fileList)
}
}
}
</script>
<style scoped>
.upload-demo {
display: inline-block;
margin-bottom: 20px;
}
</style>
```
在上面的代码中,我们使用了Element-UI中的ElUpload组件来上传图片,使用ElDialog组件来显示预览图。你可以根据需要修改上传的文件类型、大小等限制条件,以及自定义上传接口和成功回调函数。
希望这个代码示例能对你有所帮助!
阅读全文