Vue3 el-upload + WebAPI实现上传

原创已于 2022-09-20 14:47:16 修改 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2022-09-19 18:25:33 首次发布

C# 同时被 3 个专栏收录

51 篇文章

订阅专栏

VUE

31 篇文章

订阅专栏

webApi

15 篇文章

订阅专栏

本文介绍了一个基于Vue的文件上传组件实现，支持拖拽上传、批量上传及上传进度显示等功能，并详细展示了组件的代码结构和配置选项。

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官方参考：

属性

名称	描述	类型	默认值	必填
`action`	请求 URL	`string`	—	是
`headers`	设置上传的请求头部	`Headers \| Record<string, any>`	—	否
`method`	设置上传请求方法	`string`	`'post'`	否
`multiple`	是否支持多选文件	`boolean`	`false`	否
`data`	上传时附带的额外参数	`Record<string, any>`	—	否
`name`	上传的文件字段名	`string`	`'file'`	否
`with-credentials`	支持发送 cookie 凭证信息	`boolean`	`false`	否
`show-file-list`	是否显示已上传文件列表	`boolean`	`true`	否
`drag`	是否启用拖拽上传	`boolean`	`false`	否
`accept`	接受上传的文件类型（thumbnail-mode 模式下此参数无效）	`string`	—	否
`on-preview`	点击文件列表中已上传的文件时的钩子	`(uploadFile: UploadFile) => void`	—	否
`on-remove`	文件列表移除文件时的钩子	`(uploadFile: UploadFile, uploadFiles: UploadFiles) => void`	—	否
`on-success`	文件上传成功时的钩子	`(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void`	—	否
`on-error`	文件上传失败时的钩子	`(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void`	—	否
`on-progress`	文件上传时的钩子	`(evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void`	—	否
`on-change`	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	`(uploadFile: UploadFile, uploadFiles: UploadFiles) => void`	—	否
`on-exceed`	当超出限制时，执行的钩子函数	`(files: File[], uploadFiles: UploadFiles) => void`	—	否
`before-upload`	上传文件之前的钩子，参数为上传的文件，若返回`false`或者返回 `Promise` 且被 reject，则停止上传。	`(rawFile: UploadRawFile) => Awaitable<void \| undefined \| null \| boolean \| File \| Blob>`	—	否
`before-remove`	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 `false` 或者返回 `Promise` 且被 reject，则停止删除。	`(uploadFile: UploadFile, uploadFiles: UploadFiles) => Awaitable<boolean>`	—	否
`file-list` / `v-model:file-list`	默认上传文件	`UploadUserFile[]`	`[]`	否
`list-type`	文件列表的类型	`'text' \| 'picture' \| 'picture-card'`	`'text'`	否
`auto-upload`	是否自动上传文件	`boolean`	`true`	否
`http-request`	覆盖默认的 Xhr 行为，允许自行实现上传文件的请求	(options: UploadRequestOptions) => XMLHttpRequest \	Promise<unknown>	—
`disabled`	是否禁用上传	boolean	`false`	否
`limit`	允许上传文件的最大数量	number	—	否

插槽

名称	描述	Scope
`default`	自定义默认内容	-
`trigger`	触发文件选择框的内容	-
`tip`	提示说明文字	-
`file`	缩略图模板的内容	`{ file: UploadFile }`

外部方法

名称	描述	类型
`abort`	取消上传请求	`(file: UploadFile) => void`
`submit`	手动上传文件列表	`() => void`
`clearFiles`	清空已上传的文件列表（该方法不支持在 `before-upload` 中调用）	`(status?: Array<"ready" \| "uploading" \| "success" \| "fail">) => void`
`handleStart`	手动选择文件	`(rawFile: UploadRawFile) => void`
`handleRemove`	手动移除文件。 `file` 和`rawFile` 已被合并。 `rawFile` 将在 `v2.2.0` 中移除	`(file: UploadFile \| UploadRawFile, rawFile?: UploadRawFile) => void`