element 手动上传文件（使用element-ui中的el-upload自定义上传）

题引：

日常开发系统的时候    
    
    
    
，我们都会有上传文件的功能   
    
    
    
    
。但是用原生的文件上传是很繁琐的    


     


     


     


     ，那么我们都会选择使用UI组件库




 




 




 




 



，如element-plus    
    
    
    
、ant-design等


     


     


     


     


。这些UI组件库是非常容易上手且实用的   

   

   

   

，但是万恶的需求是奇怪多变的     

     

     

     

    ，我们单纯使用组件库默认的上传方式是不符合我们的需求的




  




  




  




  


，如不自动上传    


     


     


     


     、上传各个阶段时进行监听等
  


  


  


  


，那这个时候我们使用 自定义上传 就显得肥肠合适 




 




 




 




 。

正文：

我遇到的问题是选择阶段进行文件信息获取并进行特殊处理     
     
     
     
   ，并处理成手动上传 




   




   




   




   

，于是我很果断选择自定义上传来处理   

   

   

   

   
。下面直接放代码

     

     

     

     

。

<el-uploadclass="upload-demo"ref="xlsUpload"action="":show-file-list="false":file-list="fileList":http-request="handleFileUpload">上传 </el-upload>

当我们使用 自定义上传 的时候

 



 



 



 



，需要两步

1.把 action

赋值为空字符串

2.添加 :http-request"

当我们完成上面两步时                      ，那么我们就可以在 http-request 对应的回调函数进行逻辑处理： 下面我简单写了一些常用的判断

// 自定义上传事件 handleFileUpload({ file }) {// file里面包含所选择的文件信息// 如果文件类型不符合xls|xlsx  




    




    




    




    
，也可以进行其他的判断if (file.name.slice(-3) != "xls" && file.name.slice(-4) != "xlsx") {this.$message.error("上传文件只能是 XLS | XLSX 格式!");return false; }else{// 通过URL.createObjectURL可以获取文件的真实url






















，需要slice是因为前缀有blob:const fileUrl = URL.createObjectURL(file).slice(5)// 类型通过则把文件变成formData的形式                     ，因为文件一般是formData数据const formData = new FormData();formData.append(file,file);// 发送网络请求... } },

就这么简单的就可以实现自定义上传   



     



     



     



     ，不再限制于UI组件库自带的上传方式























，so easy
  




  




  




  




 。

结尾：

以上就是如何实现自定义上传的方法    
    
    
    
，很简单吧哈哈哈  


  


  


  


  
。觉得可以就帮忙点个赞 
     
     
     
     
。

最后

整理了一套《前端大厂面试宝典》    


     


     


     


     ，包含了HTML




 




 




 




 



、CSS   

   

   

   

、JavaScript     

     

     

     

    、HTTP




  




  




  




  


、TCP协议
  


  


  


  


、浏览器     
     
     
     
   、VUE 




   




   




   




   

、React

 



 



 



 



、数据结构和算法




 




 




 




 



，一共201道面试题   

   

   

   

，并对每个问题作出了回答和解析

   




   




   




   




 。

有需要的小伙伴     

     

     

     

    ，可以点击文末卡片领取这份文档




  




  




  




  


，无偿分享

部分文档展示：

文章篇幅有限
  


  


  


  


，后面的内容就不一一展示了

有需要的小伙伴     
     
     
     
   ，可以点下方卡片免费领取