Vue3 el-upload + WebAPI实现上传

vue: 

<template>
  <div class="container">
    <el-upload
      ref="refUpload"
      :auto-upload="false"
      :limit="5"
      class="upload-files-box"
      drag
      :action="submitUrl"
      multiple
      :headers="upLoadHeaders"
      :on-success="upLoadSuccess"
      v-model:file-list="fileList"
      :on-change="handleChange"
      :on-remove="handleRemove"
      accept=".*"
      :data="submitParm"
      :on-progress="uploadVideoProcess"
    >
      <el-icon class="el-icon--upload">
        <upload-filled />
      </el-icon>
      <div class="el-upload__text">拖曳文件至此或点击选择要上传的文件</div>
      <template #tip>
        <div class="el-upload__tip">
          每个文件大小不超过5M，每次最多上传5个文件。
        </div>
      </template>
    </el-upload>
    <el-button
      class="upLoadBtn"
      type="success"
      @click="submitUpload"
      :disabled="fileList.length === 0"
    >
      上传到服务器
    </el-button>
  </div>
</template>

script: 

<script setup name="UploadFilesBox">
  import { ref, reactive } from 'vue'
  import api from '../api/api'
  import { ElMessage } from 'element-plus'

  const submitUrl = ref('/web' + api.uploadResource)

  const props = defineProps({    
    resItem: {
      type: String,
      default: ''
    }
  })
  /*附带参数*/
  const submitParm = ref({
    resType: '',
    resItem: ''
  })

  const fileList = ref([])
  const upLoadHeaders = reactive({
    Authorization: 'Bearer ' + window.localStorage.getItem('token')
    // 'Content-Type': 'multipart/form-data', // 不要此参数，不要此参数，不要此参数
  })

  const refUpload = ref()
  const submitUpload = () => {
    refUpload.value.submit()
  }
  const upLoadSuccess = (response, file, files) => {
    // console.log(response)
    refUpload.value.clearFiles()
    ElMessage.success('上传成功！')
  }

  const handleChange = (file, files) => {
    fileList.value = files
    // console.log(files)
  }
  const handleRemove = (file, files) => {
    fileList.value = files
    // console.log(files)
  }

  const uploadVideoProcess = (event, file, files) => {
    console.log(parseInt(event.percent))
  }
  
</script>

css: 

<style lang="less" scoped>
  :deep(.upload-files-box) {
    .el-upload {
      --el-upload-dragger-padding-horizontal: 40px;
      --el-upload-dragger-padding-vertical: 10px;
      width: 100%;
      left: 50%;
      transform: translateX(-50%);

      .el-upload-dragger {
        padding: var(--el-upload-dragger-padding-horizontal)
          var(--el-upload-dragger-padding-vertical);
        background-color: var(--el-fill-color-blank);
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: auto;
        min-width: 180px;

        .el-icon {
          width: auto;
          height: auto;

          svg {
            height: 4em;
            width: 4em;
          }
        }
      }
    }
  }

  .upLoadBtn {
    margin-top: 20px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
</style>

WebApi 

        [Route("UploadResource", Name = "UploadResource")]
        [HttpPost]
        public HttpResponseMessage UploadResource()
        {

            try
            {
                var request = HttpContext.Current.Request;
                var form = request.Form;
                var resType = form["resType"]
                var resItem = form["resItem"]
               
               
                var files = request.Files;

                foreach (var key in files.AllKeys)
                {
                    HttpPostedFile file = files[key];
                    string filename = file.FileName;
                    Stream fileStream = file.InputStream;
                    int length = file.ContentLength;
                    byte[] bytContent = new byte[length];
                    fileStream.Read(bytContent, 0, length);

                    MResource mr = new MResource
                    {
                        ID = Guid.NewGuid().ToString("N"),                       
                        Res_Name = filename
                        Res_Item = resItem 
                        Res_Type = resType 
                        
                    };
                    new Bll().Add(mr);

                }
                return Request.CreateResponse(HttpStatusCode.OK);
            }
            catch
            {
                return Request.CreateResponse(HttpStatusCode.InternalServerError);
            }
        }

上传 API官方参考：

属性

插槽

外部方法