一.介绍:element-ui提供了上传照片的组件,el-upload能够给用户提供上传照片的服务,照片墙是指能够向服务器上传一组照片。

二.基础使用

<el-upload
      action="/dev-api/admin/product/fileUpload"
      list-type="picture-card"
      :on-success="handleAvatarSuccess"
      :on-preview="handleReshow"
      :on-remove="handleImg"
      :file-list="imageList">
    <i class="el-icon-plus"></i>
</el-upload>
<el-dialog
     :visible.sync="dialogVisible"
      width="30%">
     <img width="100%" :src="dialogImageUrl">
</el-dialog>
<script>
    handleAvatarSuccess(response, file, fileList) {
      // response表示上传结果
      // file表示当前上传的文件
      // fileList表示当前成功上传的图片数组
      // 将图片保存
      this.imageList = fileList
    },
    // 图片预览
    handleReshow(file){
      this.dialogImageUrl = file.url
      // 展示对话框
      this.dialogVisible = true
    },
    // 删除图片
    handleImg(file,fileList){
      // file代表将要删除的文件
      // fileList为删除此图片之后剩下的图片列表
      // 更新
      this.imageList = fileList
    }
</script>

字段的基础介绍

1.action:上传至服务器的地址,通常为后端提供的接口。

2.list-type:上传之后,图片的显示类型,有三种text、picture、picture-card。

        --text类型显示为文本类型,预览时不能看到上传的图片

        -- picture类型为长图片类型,预览时能够看到上传的图片

         --picture-card类型是方图片类型,预览时能够看到上传的图片

3.on-success属性:图片上传服务器成功会触发相应回调,回调函数有三个参数:response(图片上传后,服务器返回的数据)、file(当前图片文件的数据)、fileList(当前已上传图片的所有数据,为数组)

4.on-preview属性:图片预览,回调函数只有一个参数:file(当前预览图片的相关数据)

5.on-remove属性:删除图片,回调函数有两个参数:file(当前将删除文件的相关数据)、fileList(删除成功之后,剩下的所有上传图片数组)

6.file-list属性:存储已经上传的图片数组数据 

三.注意点

1.file-list属性中,每个图片的数据,必须含有name(图片名称)和url(图片路径)两个字段,这是图片显示的必要字段,如果服务器返回的数据字段不相符,需要进行整理数据。

2.el-dialog对话框是图片预览时显示图片所用,数以此对话框是书写在el-upload组件外面的,注意不要写在里面,否则在预览图片对话框消失的时候,会再次触发上传图片的选择。

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:6 个月前 )
c345bb45 10 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 10 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐