单个文件上传

单个文件上传直接参照官方文档进行，但要删除多余的属性和事件

<template>
    <div>
        <el-upload
          action="接口地址"
          :on-success="success"
          :on-error="error"
          name="fileName"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>
</template>
<script>
    export default {
        methods:{
            success(response,file,fileList){
                //成功的回调
            },
            error(err,file,fileList){
                //失败的回调
            }
        }
    }
</script>

				

					
				
				

					
				
				

					
				
				

					
				
			

文件 + 表单上传

文件 + 表单上传直接在上传标签中添加 data 属性

<template>
    <div>
        <el-upload
          action="接口地址"
          :on-success="success"
          :on-error="error"
          name="fileName"
          :data="form"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>
</template>
<script>
    export default {
        data(){
          return {
              form:{
                  name:"lilei",
                  age:'18'
              }
          }  
        },
        methods:{
            success(response,file,fileList){
                //成功的回调
            },
            error(err,file,fileList){
                //失败的回调
            }
        }
    }
</script>

				

					
				
				

					
				
				

					
				
				

					
				
			

手动上传

手动上传需要将 auto-upload 为 false

<template>
    <div>
        <el-upload
          ref="upload"
          :on-success="success"
          :on-error="error"
          action="接口地址"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器          </el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>
</template>
<script>
    export default {
        data(){
            return{
 
            }
        },
        methods:{
            submitUpload(){
                this.$refs.upload.submit();
            },
            success(response,file,fileList){
                //成功的回调
            },
            error(err,file,fileList){
                //失败的回调
            }
        }
    }
</script>

				

					
				
				

					
				
				

					
				
				

					
				
			

多文件 (一次性) 上传

在 elementUI 中，手动上传示例可以实现多文件上传，但是其上传模式是逐个文件上传.

例如：同时上传三个文件，此时的接口将被循环上传三次.

解决方法：利用手动上传的:auto-upload=”false” 和 :http-request=”uploadFile”, 先阻止默认上传，然后将获取文件及表单数据，全部放在一个 new FormData (); 然后利用 axios 请求向后端发送 form 表单格式请求，获取回调结果.

<template>
  <el-upload
          class="upload-demo"
          ref="uploaIitems"
          action=""
          :http-request="uploadHomeItems"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
   <el-button  size="small" type="primary" @click="submitUpload">上传文件</el-button>
</template>
 
<script>
export default {
  data:{
    return{
      datas:new FormData(),
    }
  },
  methods:{
    uploadHomeItems(file){
      this.datas.append('details_image[]', file.file);
    },
    submitUpload(){
      this.$refs.uploaIitems.submit()
      this.$axios({
        url:'',
        method:'post',
        data:this.datas
       }).then((response)=>{})
    }
  }
}
</script>