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
  }
}

注意事项

1. 确保后端接口与前端配置一致
2. 大文件上传需要考虑分片上传
3. 图片上传前可添加压缩处理
4. 注意设置合适的文件类型限制
5. 考虑添加上传进度提示

以上实现方式适用于大多数照片上传场景，可根据具体需求进行调整。