Vue+ElementUI+Axios实现携带参数的文件上传（数据校验+进度条）

<template>
  <el-upload
    class="upload-demo"
    drag
    :action="uploadUrl"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-progress="handleProgress"
    :headers="headers"
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      uploadUrl: 'http://your-upload-api.com/upload',
      headers: { 'Authorization': 'Bearer ' + sessionStorage.getItem('token') },
    };
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLT2M = file.size / 1024 / 1024 < 2;
 
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLT2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLT2M;
    },
    handleSuccess(response, file, fileList) {
      this.$message({
        message: '上传成功',
        type: 'success'
      });
    },
    handleError(err, file, fileList) {
      this.$message.error('上传失败');
    },
    handleProgress(event, file, fileList) {
      // 这里可以实现上传进度条的逻辑
    }
  }
};
</script>

这个代码实例展示了如何在Vue中使用Element UI的<el-upload>组件来实现文件的上传，同时使用Axios来处理HTTP请求。它包括了文件大小和类型的验证，以及对上传成功、失败和进度的处理。这个例子是一个简化的实现，但它展示了如何将这些基本的上传功能结合在一起的方法。