elementUI中upload上传组件实现手动上传、自定义上传

手动上传

<el-upload
  class="uploadFile"
  ref="upload"
  drag
  :action="uploadUrl"
  :headers="importHeaders"
  :file-list="fileList"
  :on-change="handleChange"
  :show-file-list="true"
  :on-success="onSuccess"
  :on-error="onError"
  :auto-upload="false"
  accept=".xls,.xlsx">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
<el-button size="medium" type="primary" @click="onSubmitImportExcel">提交</el-button>
<el-button size="medium" @click="closed" type="danger">取消</el-button>

<script>
  import CookieUtil from '@/utils/cookieUtil'//这是我自己项目封装的存取cookies的工具方法
  import store from '@/vuex/store'

  export default {
    name: 'importStudentScoreExcel',
    data(){
      const role = store.getters['role']//由于项目分角色，所以还要获取当前登录的角色
      const token = CookieUtil.getCookie(role)//根据角色名获取token
      return{
        fileList:[],
        uploadUrl:'',
        importHeaders:{ Authorization: token},//设置手动上传的头部
      }
    },
    
    methods:{
      onSuccess(res) {
        if (res.code===2000){
          this.$message('上传成功')
        } else {
          this.$message(res.message)
        }
        this.closed()
      },
      onError(res) {
        this.$message('上传失败')
      },
      handleChange(file, fileList) {//实现单个文件上传，css样式就是取消更换时要上传文件时的过渡动画
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的文件
        }
      },

      //提交修改学生状态请求
      onSubmitImportExcel:function () {
        this.uploadUrl = `/api/zy-achievement/auth/import`  // 这里，读者换成实际项目中的上传接口
        this.$nextTick(() => {
          this.$refs.upload.submit()
        })
      }
    }
  }
</script>

<style scoped>
  .uploadFile {
    display: flex;
  }
  /deep/ .el-list-enter-active,
  /deep/ .el-list-leave-active {
    transition: none;
  }

  /deep/ .el-list-enter,
  /deep/ .el-list-leave-active {
    opacity: 0;
  }
  /deep/ .el-upload-list {
    height: 40px;
  }
</style>

自定义上传

<el-form ref="form" :model="form" :inline="true" label-width="auto">
  <el-form-item label="考试名称" prop="testName">
    <el-input v-model="form.testName" placeholder="考试名称"></el-input>
  </el-form-item>
  <el-form-item label="文件">
    <el-upload
            class="uploadFile"
            ref="upload"
            drag
            :action="uploadUrl"
            :headers="importHeaders"
            :file-list="fileList"
            :on-change="handleChange"
            :show-file-list="true"
            :auto-upload="false"
            :http-request="uploadFile"
            accept=".xls,.xlsx">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
  </el-form-item>
</el-form>
<el-button size="medium" type="primary" @click="onSubmitImportExcel">提交</el-button>
<el-button size="medium" @click="closed" type="danger">取消</el-button>

<script>
  import API from '@/http/api'//自己封装的请求方法

  export default {
    name: 'importStudentScoreExcel',
    data(){
      return{
        fileList:[],
        uploadUrl:'',
        form:{
          testName:''
        }
      }
    },
    methods:{
      handleChange(file, fileList) {
        console.log(file,fileList)
        this.file=file
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的文件
        }
      },
      uploadFile(params){
        const formData = new FormData();
        formData.append('file',params.file)
        formData.append('testName',this.form.testName)
        API.ACADEMIC.ENTRY_GRADE_BY_EXCEL(formData).then(res=>{
        //这里使用的请求方法如下，request的封装就不展示出来了，网上都有： 
        //export const ENTRY_GRADE_BY_EXCEL = (formData) => request.post(`/api/zy-achievement/auth/import`,formData)
          this.$message.success("添加成功")
        })
      },
      //提交修改学生状态请求
      onSubmitImportExcel:function () {
        this.$refs.upload.submit()
      }
    }
  }
</script>