Element ui upload上传组件

<el-upload
  aaction="url地址"
  :on-success="successFile" //文件上传成功时的钩子,function(response, file, fileList),
  :before-remove="handRemove" //删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或 
     者返回 Promise 且被 reject,则停止删除。function(file, fileList)
  :http-request="headHttpRequest"
  :limit="" //控制文件上传的数量。
  accept=".doc,.docx,.jepg,.jpg,.pdf,.png,.xls,.xlsx,.DOC,.DOCX,.JPEG,.JPG,.PDF,.PNG,.XLS,.XLSX" //文件上传的类型
<el=button
  slot="trigger"
  size="mini"
  type="primary"
> 上传
</el-button>
</el-upload>

   :on-success属性:

successFile(res){
  let successFile = res.data
  console.log(successFile)
}

 :before-remove属性:

handleRemove(file,fileList,index){
  return:
  this.$confirm(`是否删除文件?`,`删除`,{
  confirmButtonText: "确定",
  cancelButtonText: "取消”,
  type: "warning",
 })
   .then(() => {
      let id = "";
      if(file.response) {
        fileListid = file.response.id;
      } else if(file.id) {
        fileListid = file.id
      }
   this.$axios.post(`url删除地址/${fileListid}`).then((res) => {
     this.fileList[`fileList${index}`] = [];
     });
    })
     .catch((err) => {
      this.fileList[`fileList${index}`] = fileList;
     })
}

  :http-request属性

     headHttpRequest(file,index) {
       let formData = new FormData();// 新建一个FormData()对象,这就相当于你新建了一个表单
       formData.append("file", fileObject.file);	// 将文件保存到formData对象中
       formData.append("serverType", this.importServerType) // 这是我其他数据,你需要的话,也可以添加
       this.$axios.post(`url地址`,formData).then((res) => {
          consolel.log("文件上传成功“)
       })
      }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值