Element ui upload上传组件

慕光赫
2023-12-01
<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("文件上传成功“)
       })
      }

 类似资料: