使用element的upload组件实现上传图片

使用element的upload组件实现图片的上传

<el-upload 
	class="upload"
    action="接口地址"
    :limit="1"
    :auto-upload="false"
    :before-remove="beforeRemove"
    :on-exceed="handleExceed"
    :on-change="commitmentFilehandleUpload"
    :on-error="handleFail"
    :file-list="fileList"
     >
     <el-button type="primary" class="upload-map">上传图片</el-button>
</el-upload>               

// 上传文件超出限制提示，files是选择上传的文件，fileList是已上传的文件列表
    handleExceed(files, fileList) {
    
    
      this.$message.warning(
        `当前限制选择 1个文件，本次选择了 ${
      
      
          files.length
        } 个文件，共选择了 ${
      
      files.length + fileList.length} 个文件`
      )
    }
//删除图片
	beforeRemove(file, fileList) {
    
    
      this.$confirm(`确定移除 ${
      
      file.name}？`, {
    
    
        customClass: '类名'
      }).then(() => {
    
    
      //图片地址
        this.imageUrl = ''
      })
    }
// 上传图片失败提示
    handleFail() {
    
    
      this.$message.error(`上传图片失败！`)
    },

//获取图片地址
this.imageUrl = process.env.VUE_APP_BASE_API + '下载图片的接口地址' + 确定图片的变量

属性

action:必选参数，上传的地址
accept:接受上传的文件类型
on-preview:点击文件列表已上传的文件时的钩子
on-success:文件上传成功时的钩子
on-error:文件上传失败时的钩子
on-change:文件状态改变时的钩子，添加文件、上传成功、上传失败时都会调用
before-remove:删除文件之前的钩子
auto-upload:是否在选取文件后立即进行上传
limit:最大允许上传的个数
on-exceed:文件超出个数限制时的钩子
file-list:上传的文件列表