最全面的.NET【文件上传】总结（包括js/vue）

阿里云教程2个月前发布

19 1 0

‬【作者】科技、互联网行业优质创作者

【专注领域】.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造

点击右上方“关注”，里面有许多高价值技术文章，是你刻苦努力也积累不到的经验，能助你快速成长。升职+涨薪！！

前言

本文包含.NET Core、.NET Framework、及Web前端、三端的文件上传代码，是全网最全面的文件上传知识总结。

指定文件参数名(.Net Core)

代码

        [HttpPost("UploaFile")]
        public async Task UploadFileAsync(IEnumerable<IFormFile> files)
        {
            //获取上传的文件之一
            var file1 = files.FirstOrDefault();

            //获取文件名
            var file1Name = file1.FileName;

            //获取文件流。后续就能进行读取、保存、等文件操作了
            var file1Stream = file1.OpenReadStream();
        }

调用示例

最全面的.NET【文件上传】总结（包括js/vue）

这里有一个需要注意的地方，就是上传文件的参数名，需要跟接口的入参名一致，也就是 files，我们使用的类型为 IEnumerable< IFormFile>，主要是 IFormFile 这个，由于我们上传的文件可能不止一个，所以这里使用了集合，要是不喜爱 IEnumerable，换成 List 也是可以的；

不指定文件参数名(.Net Core)

而在实际开发中，我们可能会碰到前端不配合，或者参数名改来改去，我们后端又不想频繁更改，那怎么办呢，此时我们可以使用以下的方法。

代码

        [HttpPost("UploaFile")]
        public async Task UploadFileAsync()
        {
            //获取上传的文件之一
            var file1 = HttpContext.Request.Form.Files.FirstOrDefault();

            //获取文件名
            var file1Name = file1.FileName;

            //获取文件流。后续就能进行读取、保存、等文件操作了
            var file1Stream = file1.OpenReadStream();
        }

混合(.Net Core)

而同样是一个POST请求，自然是可以通过url，route，from这些传参啦！

代码

[HttpPost("{method}/{value}/UploaFile")]
public async Task<Dictionary< string, object >> UploadFileAsync(
    [FromRoute] Parameter route,
    [FromQuery] Parameter query,
    [FromForm] Parameter form,
    IEnumerable<IFormFile> files)
{
    
}

示例

最全面的.NET【文件上传】总结（包括js/vue）

.Net Framework中的文件上传

与.Net Core所用方法稍有不同

代码

        //获取上传的文件之一
        var file1 = context.Request.Files[0];

        //获取文件名
        var file1Name = file1.FileName;

        //获取文件流。后续就能进行读取、保存、等文件操作了
        var file1Stream = file1.InputStream;

Web前端的处理方式

下面给出Javascript与Vue两种文文件上传方式。

JavaScript 方式

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="lib/jquery/dist/jquery.js"></script>
  <script>
 
    $(document).ready(function () {
      $("#btn_fileUpload").click(function () {
        var fileUpload = $("#files").get(0);
        var files = fileUpload.files;
        var data = new FormData();
        for (var i = 0; i < files.length; i++) {
          data.append(files[i].name, files[i]);
        }
        $.ajax({
          type: "POST",
          url: 'http://localhost:55084/single_upload_avatar',
          contentType: false,
          processData: false,
          data: data,
          success: function (data) {
            console.log(JSON.stringify(data));
          },
          error: function () {
            console.log(JSON.stringify(data));
          }
        });
      });
    })
 
    //前端第一种提交方式
    function uplpadfile() {
      //获取表单的数据
      var formdata
      var file = $("#files").get(0);
      var files = file.files;
      var formdata = new FormData();
      for (var i = 0; i < files.length; i++) {
        formdata.append("files", files[i]);
      }
 
      $.ajax({
        type: 'Post',
        data: formdata,
        contentType: false,
        processData: false,
        url: "http://localhost:55084/upload_avatar",
        success: function (result) {
          if (result.Success) {
          } else {
            alert('提交失败,重新尝试提交');
          }
        }
      })
    };
</script>
</head>
<body>
  <h3>1、ajax上传</h3>
  <form enctype="multipart/form-data">
    <input type="file" id="files" name="files" placeholder="file" multiple>
    <input type="button" id="btn_fileUpload" value="提交">
  </form>
  <br /><br /><br />
  <h3>2</h3>
  <form enctype="multipart/form-data">
    <input type="file" name="files" id="files" value="选择需要上传的文件" multiple />
    <input type="button" value="提交" onclick="uplpadfile()">
  </form>
  <br /><br /><br />
  <h3>3、form 表单标签 submit 上传</h3>
  <h6>表单提交上传 通过IFormFile参数获取上传文件信息</h6>
  <h6>AJAX请求上传，通过Request.Form.Files获取上传文件信息</h6>
  <form method="post" enctype="multipart/form-data" action="/batch_upload_avatar">
    <div class="form-group">
      <div class="col-md-10">
        <p>Upload one or more files using this form:</p>
        <input type="file" id="files" name="files" multiple />
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-10">
        <input type="submit" value="服务器方式上传" />
      </div>
    </div>
  </form>
</body>
</html>

Vue el-upload 方式

代码

<template>
  <el-upload
    class="avatar-uploader"
    action="http://localhost:60548/api/v1.0/users/upload_avatar"
    :headers="token"
    :data="{ user_code: 666 }"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>
<script>
import { getToken } from "@/utils/auth";
 
export default {
  data() {
    return {
      token: { Authorization: `Bearer ${getToken()}` }
    };
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
 
<script>
export default {
  data() {
    return {
      imageUrl: "",
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      return isLt2M;
    },
  },
};
</script>