在Element UI中上传图片.docx
需积分: 0 76 浏览量
2023-05-09
10:01:10
上传
评论
收藏 11KB DOCX 举报
在 Element UI 中，可以使用 el-upload 组件来实现图片上传功能。
首先，需要引入 el-upload 组件和 axios 库（用于上传图片）：
```html
<template>
<el-upload
class="upload-demo"
action="https://www.example.com/upload"
:headers="{ Authorization: 'Bearer ' + token }"
:before-upload="beforeUpload"
:on-success="onSuccess"
:on-error="onError"
:auto-upload="false"
:list-type="'picture-card'"
:file-list="fileList"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
token: '', // 授权 Token
fileList: [], // 文件列表
}
},
methods: {
beforeUpload(file) {
// 限制图片大小
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!')
return false
}
// 设置文件名为当前时间戳
const timestamp = Date.now()
file.name = `${timestamp}.${file.name.split('.').pop()}`
return true
资源评论
