element-ui 文件上传

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

环境：
Springboot+Vue+Element-ui

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

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


1.多文件自动上传
html

<el-upload
        ref="upload"
        :http-request="upload"
        :show-file-list="true"
        action="http"
        :before-upload="beforeAvatarUpload"
        :auto-upload="true"
        :on-success="handleAvatarSuccess"
        class="upload-demo"
        drag
        name="file"
        multiple>
        <i class="el-icon-upload"/>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传jar文件，且不超过2MB</div>
      </el-upload>

js

<!-- 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实现）

<el-upload
    ref="upload"
    :http-request="upload"
    :show-file-list="true"
    :before-upload="beforeAvatarUpload"
    :auto-upload="false"
    :on-success="handleAvatarSuccess"
    class="upload-demo"
    action="http"
    drag
    name="file"
    multiple>
    <i class="el-icon-upload"/>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div slot="tip" class="el-upload__tip">只能上传jar文件，且不超过2MB</div>
 </el-upload>
  <el-button @click="subPicForm">提交上传</el-button>

<!-- JS代码 -->
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)
                })
            }
        }
    })