elementui照片
Element UI 照片上传组件
Element UI 提供了 el-upload 组件用于实现照片上传功能，支持拖拽上传、多文件上传、图片预览等特性。
基本用法
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>照片墙模式
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>拖拽上传
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>自定义上传行为
methods: {
handleUpload(file) {
// 自定义上传逻辑
console.log(file)
}
}常用属性
action: 必填，上传地址multiple: 是否支持多选accept: 接受上传的文件类型auto-upload: 是否自动上传limit: 最大允许上传个数on-exceed: 文件超出个数限制时的钩子
常用事件
on-success: 文件上传成功时的钩子on-error: 文件上传失败时的钩子on-progress: 文件上传时的钩子on-change: 文件状态改变时的钩子
图片预览处理
methods: {
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
}
}注意事项
- 确保后端接口与前端配置一致
- 大文件上传需要考虑分片上传
- 图片上传前可添加压缩处理
- 注意设置合适的文件类型限制
- 考虑添加上传进度提示
以上实现方式适用于大多数照片上传场景，可根据具体需求进行调整。
