element文件手动上传（elementUI自定义上传文件（前端后端超详细过程））

elementUI自定义上传文件（前端后端超详细过程）

简介：自定义上传文件并与其他参数一同提交到后台(主要使用axios)

简单介绍组件（ upload）的属性（熟悉参数的直接略过）

总结elmentUI一下它的使用和常用属性的作用 
    
    
 。

limit : 限制了上传文件的个数  
    
    
 ， 如果你上传单个文件这里设置 1 
     


     


     ，多个文件就别设置
     


     


     。 auto-upload:自动上传,在我看来 




 




 




，除非是单独上传文件时, 这个属性才有用,因为单独文件直接上传到后台服务器 




 




 




。 而我们想要自己获取到组件里的文件和其它表单数据,再上传,就需要别的办法,下面会讲 

   

   

。 action:这个属性是上传文件的地址,当我们指定了 auto-upload 属性 

   

   

， 组件就会自动按 action 的地址提交
     

     

     。我一般都不设置这个属性：action="none", 因为我觉得自定义的更好,拓展性强  




  




  



。 multiple：这个属性支持多文件上传,如果你是上传单文件这个属性随便设不设置
     

     

     ，如果是多文件,就要设置,所以建议不动,因为它默认开启 


  


  


。 accept：这个就不细说了,限制类型的,当然仅限选择时的类型  




  




  



，用户要是想上传其它类型的文件照样有办法
     
     
    。 主要目的自定义上传文件

2.1 组件代码

<el-upload class="upload" ref="upload" action="string" :file-list="fileList" //存放选择的文件 :auto-upload="false" //取消自动上传 :http-request="uploadFile" 自定义上传的方法 :on-change="handleChange" //文件选择后执行的方法 :on-preview="handlePreview" //点击显示文件（没啥用） :on-remove="handleRemove" //移除文件 multiple="multiple"> <el-button slot="trigger" size="small" type="primary" @click="delFile">选取文件</el-button> </el-upload>

2.2 data中的属性

data(){ return{ // el-upload组件绑定的属性—— :file-list=“fileList 
    
    
 ”,渲染后fileList[index]是Object类型,而不是后台所需的File类型, // 而这个组件已经把对应的File类型存储到了fileList[index].raw这个属性里,直接拿来用就好. fileList: [], // 不支持多选 multiple: false, formData: "", } }

2.3 methods的方法

//点击上传文件触发的额外事件,清空fileList delFile () { this.fileList = []; }, handleChange (file, fileList) { this.fileList = fileList; // console.log(this.fileList, "sb"); }, //自定义上传文件 uploadFile (file) { this.formData.append("file", file.file); // console.log(file.file, "sb2"); }, //删除文件 handleRemove (file, fileList) { console.log(file, fileList); }, // 点击文件 handlePreview (file) { console.log(file); }, 与其他参数通过axios提交到后台

这里要使用到FormData()对文件进行存储才能提交到后台

具体实现方式:

//准备一个提交按钮 <el-button type="primary" @click="onSubmit">保存</el-button>

提交事件:

//保存按钮 onSubmit () { let formData = new FormData(); formData.append("file", this.fileList[0].raw);//拿到存在fileList的文件存放到formData中 //下面数据是我自己设置的数据,可自行添加数据到formData(使用键值对方式存储) formData.append("title", this.title);

axios异步提交:

注意：使用FormData提交文件只能使用post请求

在post请求体中需要设置 “Content-Type
     


     


     ”:

“multipart/form-data;charset=utf-8 




 




 




”,提醒后台数据是FormData类型 axios.post(post请求的具体路径, formData, { "Content-Type": "multipart/form-data;charset=utf-8" }) .then(res => { if (res.data === "SUCCESS") { this.$notify({ title: 成功, message: 提交成功, type: success, duration: 1000 }); } })

最后后台数据的接收

注意：前台传送的是FormData数据 


  


  


，要拿到文件要使用@RequestParam(前端存放到formData的key)

MultipartFile file进行接收 //采用PostMapping @PostMapping(具体路径) public String saveVue(String title,@RequestParam("file") MultipartFile file) throws IOException { //拿到具体文件 file return "SUCCESS"; }

介绍到这就基本完成了elmentui的自定义上传功能
     
     
    ，记得点赞！