ASP.NET Core 上传文件 图片上传

在 ASP.NET Core 中上传文件

vs2019 选择文件后，调试停止问题
工具 -> 选项 -> 项目和解决方案 -> Web项目 -> 浏览器窗口关闭时停止调试器(s) 复选√ 去掉

1、单个文件
     IFormFile

2、多个文件的集合：
     IFormFileCollection
     IEnumerable<IFormFile>
     成员列表<IFormFile>

3、Postman请求

ASP.NET Core Controller 文件

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication.Controllers
{
  public class TestController : Controller
  {
    public IActionResult Index()
    {
      return View();
    }

    /// <summary>
    /// from表单submit提交上传,通过IFormFile参数获取上传文件信息【OK】
    /// el-upload【获取不到参数】
    /// </summary>
    /// <param name="files"></param>
    /// <returns></returns>
    [HttpPost("upload_avatar")]
    public async Task<IActionResult> UploadAvatar([FromForm] List<IFormFile> files)
    {
      long size = files.Sum(f => f.Length);

      if (files.Count < 1)
        return Ok(new { code = -1, msg = "没有上传文件", data = "" });

      //当前程序路径
      var path = Directory.GetCurrentDirectory();

      foreach (var formFile in files)
      {
        if (formFile != null && formFile.Length > 0)
        {
          var filePath = Path.GetTempFileName();

          var filePath1 = Path.Combine("", Path.GetRandomFileName());

          #region  图片文件的条件判断

          //没有后缀扩展名的文件名
          var currentPictureWithoutExtension = Path.GetFileNameWithoutExtension(formFile.FileName);

          //文件后缀
          var fileExtension = Path.GetExtension(formFile.FileName).ToUpper();

          //判断后缀是否是图片
          const string fileFilt = ".gif|.jpg|.jpeg|.png";
          if (fileExtension == null)
            return new JsonResult(new { code = "-1", msg = "上传的文件没有后缀" });

          if (fileFilt.IndexOf(fileExtension.ToLower(), StringComparison.Ordinal) <= -1)
            return new JsonResult(new { code = "-1", msg = "请上传jpg、png、gif格式的图片" });

          //判断文件大小    
          long length = formFile.Length;
          if (length > 1024 * 1024 * 2) //2M
            return new JsonResult(new { code = "-1", msg = "上传的文件不能大于2M" });

          #endregion

          #region 上传图片
          using (var stream = System.IO.File.Create(filePath))
          {
            await formFile.CopyToAsync(stream);
          }
          #endregion
        }
      }
      //return Ok();
      return Ok(new { count = files.Count, size });
    }

    /// <summary>
    /// from表单submit提交上传,通过IFormCollection参数获取上传文件信息【OK】
    /// el-upload【OK】
    /// </summary>
    /// <param name="files"></param>
    /// <returns></returns>
    [HttpPost("up_avatar")]
    public async Task<IActionResult> UpAvatar([FromForm] IFormCollection formCollection)
    {
      var fileFolder = Path.Combine("", "wwwroot/upload");

      //定义图片数组后缀格式
      string[] LimitPictureType = { ".JPG", ".JPEG", ".GIF", ".PNG", ".BMP" };

      FormFileCollection fileCollection = (FormFileCollection)formCollection.Files;
      foreach (IFormFile file in fileCollection)
      {
        //获取图片后缀是否存在数组中
        string currentPictureExtension = Path.GetExtension(file.FileName).ToUpper();
        if (LimitPictureType.Contains(currentPictureExtension))
        {
          var fileName = $"{DateTime.Now.ToString("yyyyMMddHHmmss")}{Path.GetExtension(file.FileName)}";
          var filePath = Path.Combine(fileFolder, fileName);
          using (var stream = new FileStream(filePath, FileMode.Create))
          {
            await file.CopyToAsync(stream);
          }
        }
        else
        {
          //return Json(new { status = -2, message = "请上传指定格式的图片", data = hash });
        }
      }
      return Ok();
    }

    /// <summary>
    /// from表单submit提交上传,通过IFormFileCollection参数获取上传文件信息【OK】
    /// el-upload【获取不到参数】
    /// </summary>
    /// <param name="formCollection"></param>
    /// <returns></returns>
    [HttpPost("batch_upload_avatar")]
    public async Task<IActionResult> BatchUploadAvatar([FromForm] IFormFileCollection files)
    {
      long size = files.Sum(f => f.Length);

      var fileFolder = Path.Combine("", "wwwroot/upload");

      if (!Directory.Exists(fileFolder))
        Directory.CreateDirectory(fileFolder);

      if (files.Count > 0)
      {
        foreach (IFormFile file in files)
        {
          var fileName = $"{DateTime.Now.ToString("yyyyMMddHHmmss")}{Path.GetExtension(file.FileName)}";
          var filePath = Path.Combine(fileFolder, fileName);
          using (var stream = new FileStream(filePath, FileMode.Create))
          {
            await file.CopyToAsync(stream);
          }
        }
      }
      return Ok();
    }

    /// <summary>
    /// AJAX请求上传，通过Request.Form.Files获取上传文件信息【OK】
    /// el-upload【OK】
    /// </summary>
    /// <param name="files"></param>
    /// <returns></returns>
    [HttpPost("single_upload_avatar")]
    public async Task<IActionResult> SingleUploadAvatar()
    {
      #region 单个文件上传
      var file = Request.Form.Files[0];
      
      string fileName = string.Empty;
      //using (FileStream fs = System.IO.File.Create(fileName))
      //{
      //  file.CopyTo(fs);
      //  fs.Flush();
      //}
      #endregion

      #region 批量上传
      var files = Request.Form.Files;
      string filePhysicalPath = string.Empty;
      foreach (var itemFile in files)
      {
        if (file.Length > 0)
        {
          var fName = System.Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);//文件名+文件后缀名
          using (var stream = new FileStream(filePhysicalPath + fileName, FileMode.Create))
          {
            await file.CopyToAsync(stream);
          }
        }
      }
      #endregion
      return Ok();
    }

    [HttpPost("upload_base64")]
    public ActionResult UploadBase64(string fileBase64, string fileName)
    {
      return Ok();
    }
  }
}

*
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>

*
*
*