单个文件上传

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

<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>