element-ui 文件上传

前言
工作中碰到需要多图上传，在使用element-ui解决过程中碰到一些问题，在这里分享给大家。

环境：
Springboot+Vue+Element-ui

正文
这次上传使用的是Elemet-ui的uoload上传组件，组件预留的钩子回调还是比较充足的。

实现多图上传主要用到以下两个属性：


1.多文件自动上传
html

        
        
将文件拖到此处，或点击上传
        
只能上传jar文件，且不超过2MB
      

js

new Vue({
        el: '#app',
        data: {
           multiple:true,
            formDate:""
        },
        mounted: function () {
        },
        methods: {
            // 自定义文件上传的方式
		    upload(file) {
		      const formData = new FormData()
		      formData.append('files[]', file.file)
		  // 多文件上传带其他参数，传递formdata和data不能一起传递，要传递formdata   就不能有data
		      formData.append('id', 1)
		      formData.append('Content-Type', 'multipart/form-data')
		      axios.post("your URL",formData).then( res => {
		           console.log(res)
		            this.handleAvatarSuccess(res.data)
		        }).catch( res => {
		            console.log(res)
		        })
		   },
           // 上传前的大小验证及格式验证
			beforeAvatarUpload(file) {
			      const isJPG = file.name.slice(-4) === '.jar'
			      const isLt2M = file.size / 1024 / 1024 < 2
			      if (!isJPG) {
			        this.$message({
			          message: '上传文件只能是 JAR 格式',
			          type: 'error'
			        })
			      }
			      if (!isLt2M) {
			        this.$message({
			          message: '上传图片大小不能超过 2MB',
			          type: 'error'
			        })
			      }
			      return isJPG && isLt2M
			    }，
			    handleAvatarSuccess(res, file) {
					 console.log(res)
					  console.log(file)
				 }
			 }
        }
    })

   

    

Elemet-ui是自带多图上传的，但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入，有截图可以看出，实质是进行多次请求。
在上传事件触发后，多图上传的默认实现调用了三次POST请求

2 多图一次上传。

思路就是使用H5的FormData对象模拟表单上传：

修改:auto-upload="false"属性为false，阻止组件的自动上传
new FormData()创建创建FormData对象
向FormData对象设置文件，并把FormData作为参数发送到后台（后台是java实现）

    
    
将文件拖到此处，或点击上传
    
只能上传jar文件，且不超过2MB
 
  提交上传

new Vue({
        el: '#app',
        data: {
            formDate:""
        },
        mounted: function () {
        },
        methods: {
            upload(file){
                this.formDate.append('file', file.file);
            },
            subPicForm(){
                this.formDate = new FormData()
                this.$refs.upload.submit();
                this.formDate.append('id', "code");
                this.formDate.append('Content-Type', 'multipart/form-data')
                axios.post("your URL", this.formDate).then( res => {
                    console.log(res)
                }).catch( res => {
                    console.log(res)
                })
            }
        }
    })