el-upload 自定义请求上传图片,达到上传数量限制后,隐藏图片上传框

需求:1.图片上传请求的时候使用自定义 2.上传数量1张,上传了1张之后,隐藏上传框

步骤:

1.把 action 赋值为#字符串

  1. 添加 :http-request"

3.通过添加disabled的样式,控制达到上传数量后隐藏上传框

<el-upload :class="{ disabled: uploadDisabled }" :file-list="fileList" :http-request="upLoad" :limit="1" action="#" :list-type="'picture-card'">
<i class="el-icon-plus"></i>
</el-upload>
data() {
return {
// 上传成功后的图片显示
fileList: []
}
},
computed: {
    //图片上传1张后,隐藏上传框
    uploadDisabled() {
      return this.fileList.length > 0
    }
}
methods: {
upLoad(file){
let formData = new FormData()
//multipartFile:根据请求的参数名定义
formData.append('multipartFile', file.file)
//发送上传图片的请求
uploadIMg(this.form.roomId, formData).then(res => {
        this.$modal.msgSuccess('上传成功')
        this.fileList = [{ 'url': res.data.url }]  
      })
      //清理一下图片
      this.$refs.upload.clearFiles()
}
}
//上传图片封装的方法
export function uploadIMg(roomId,data) {
  return request({
    url: `/meeting/room/upload?roomId=${roomId}`,
    method: 'post',
    headers:{'content-Type':'multipart/form-data'},   //注意的点
    data:data,
    timeout:50000
  })
}
//隐藏图片上传框的css
::v-deep.disabled {
  .el-upload--picture-card {
    display: none;
  }
}

おすすめ

転載: blog.csdn.net/weixin_72589507/article/details/129162239