基于net6的头像上传功能

一、在Program.cs类中启用静态资源访问

1、先配置静态文件中间件

//添加静态文件中间件
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(Directory.GetCurrentDirectory()),//添加自定义静态文件目录
    //ContentTypeProvider = provider,
    RequestPath = "/StaticFiles" //访问地址前缀
});

2、上传头像时文件过大可能会引起报错，这里是个坑🕳，所以要配置一下上传大文件的配置

builder.Services.Configure<FormOptions>(x =>
{
    x.ValueLengthLimit = int.MaxValue;
    x.MultipartBodyLengthLimit = int.MaxValue;
});

二、视图页代码

 			<div class="form-group">
                头像上传：
                <div>
                    <div style="position: relative;border: 5px solid lightblue;width: 150px;height:150px;margin: 5px auto;border-radius: 50%;">
                        @{
                            var img = Model.Img == "" ? "/images/default.jpg" : Model.Img;
                        }
                        <img src=@img alt="选择并上传头像" id="avatar_img1"
                             style="width: 140px;height: 140px;left:0;top: 0;border-radius: 50%;" />
                        <input asp-for="Img" class="form-control" type="file" id="avatar_file" name="avatar_file"
                               accept="image/jpg,image/png,image/gif"
                               style="width: 100%;height:100%;opacity: 0;position: absolute;left:0;top: 0;" />
                    </div>
                    <br />
                </div>
            </div>

jQuery代码：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        // 头像预览
        $("#avatar_file").change(function () {
            // 获取上传文件对象
        var file = $(this)[0].files[0];
        // 读取文件URL
        var reader = new FileReader();
        reader.readAsDataURL(file);
        // 阅读文件完成后触发的事件
        reader.onload = function () {
            // 读取的URL结果：this.result
            $("#avatar_img1").attr("src", this.result);
        }
            var id = $("#userId").val();
             var formData = new FormData();
             formData.append("file",file);
             formData.set("id",id);
            $.ajax({
                url: '/Upload/file',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (res){},
                error: function (XmlHttpRequest, textStatus, errorThrown) {},
                complete: function () {}
            });
        })
    });
</script>

三、控制器代码

using Microsoft.AspNetCore.Mvc;
using BookManage01.Tools;
using BookManage01.Models;

namespace BookManage01.Controllers
{
    /// <summary>
    /// 文件上传
    /// </summary>
    [Route("upload")]
    public class UploadController : Controller
    {
        readonly IConfiguration _config;
        readonly IWebHostEnvironment _env;
        private readonly LibraryContext _context;
        public UploadController(IConfiguration config, IWebHostEnvironment env,LibraryContext context)
        {
            _config = config;
            _env = env;
            _context = context;
        }

        /// <summary>
        /// 上传文件
        /// </summary>
        /// <param name="path">文件分类的文件夹名称</param>
        /// <returns></returns>
        [HttpPost("file")]
        public async Task<IActionResult> FileUpload(IFormCollection form)
        {
            var files = form.Files;
            var id = form.Where(m=>m.Key=="id").FirstOrDefault().Value.ToString();//获取文件中配置的键值对id值
            if (files.Count == 0) return Ok(Json("请选择文件"));
            
            var domain = _config["Domain"];
            ///{path}/{DateTime.Now:yyyyMMdd}
            var dircstr = $"/Files/";//文件存储地址
            var result = new List<string>();
            foreach (var file in files)
            {
                var filename = Path.GetFileName(file.FileName);
                if (string.IsNullOrEmpty(filename)) continue;

                //var fileext = Path.GetExtension(filename).ToLower();//获取文件后缀，我这里没有用到
                var folderpath = _env.ContentRootPath;
                CommonFun.CreateDir(folderpath + dircstr);
                
                var fileloadname = dircstr + filename;
                using (var stream = new FileStream(folderpath + fileloadname, FileMode.Create))
                {
                    await file.CopyToAsync(stream);
                }
                result.Add(domain + fileloadname);
            }
            int i = SaveImag(int.Parse(id), result[0]);
            return Ok(Json(i));
        }

        //将头像保存到数据库
        public int SaveImag(int id,string path)
        {
            var user = _context.Users.FirstOrDefault(m => m.Id == id);
            if (user != null)
            {
                user.Img = "/StaticFiles"+path;
            }
            return _context.SaveChanges();
        }

        #region 校验文件类型
        string[] badext = { "jpg", "jpeg", "png" };
        private string ProExt(string ext)
        {
            if (string.IsNullOrEmpty(ext)) return "";
            if (badext.Contains(ext)) throw new Exception("危险文件");
            if (ext.First() == '.') return ext;
            return "." + ext;
        }
        #endregion
    }
}

运行起来上传文件后项目里就会在你指定的文件夹里生成你上传的文件了

页面访问该文件下图片地址格式：/StaticFiles/Files/222.png