第六节：基于LayUI组件的文件上传 和 基于dropzonejs的文件上传

一. 接口设计

1. 说明

　设计异步方法，这里采用文件流的形式进行存储,设计两个接口,分别用来处理单文件上传和多文件上传.

2. 大致思路

　获取文件→判空→获取文件名和扩展名→设置存放绝对路径(若不存在,则新建)→编辑文件保存名称(这里随机命名,所以不用判重) →拼接最终路径进行保存→DB中存储相对路径→返回前端成功和相对路径.

3. 其它

　可以通过 .Length，来获取文件的大小

代码分享： 

        #region 01-单文件上传
        /// <summary>
        /// 单文件上传
        /// </summary>
        /// <param name="_hostingEnvironment"></param>
        /// <returns></returns>
        public async Task<IActionResult> SingleSaveFile([FromServices] IWebHostEnvironment _hostingEnvironment)
        {
            try
            {
                long size = 0;   //统计上传文件的大小(单位b)
                var files = Request.Form.Files;  //获取文件
                if (files.Count == 0)
                {
                    return Json(new { status = "error", msg = "上传内容为空", data = "" });
                }

                //获取文件扩展名
                var fileName = files[0].FileName;
                int idxStart = fileName.LastIndexOf(".");
                string areviation = fileName.Substring(idxStart, fileName.Length - idxStart);

                //编辑文件的存储路径
                var filePath = _hostingEnvironment.ContentRootPath + @"\DownLoad\Picture\";
                if (!Directory.Exists(filePath))
                {
                    Directory.CreateDirectory(filePath);
                }
                //编辑文件的名称(目前是随机命名,如果用原名保存,需要判重)
                var myFileName = $"{Guid.NewGuid().ToString()}{areviation}";
                //最终路径
                var finalPath = filePath + myFileName;
                size += files[0].Length;
                using (FileStream fs = System.IO.File.Create(finalPath))
                {
                    await files[0].CopyToAsync(fs);
                    await fs.FlushAsync();
                }

                //DB中存储的或者返回给前端的都是相对路径
                string relativeUrl = $"/DownLoad/Picture/{myFileName}";

                return Json(new { status = "ok", msg = "上传成功", data = relativeUrl });
            }
            catch (Exception ex)
            {
                return Json(new { status = "error", msg = "上传失败", data = "" });
            };
        }
        #endregion

        #region 02-多文件上传
        /// <summary>
        /// 多文件上传
        /// </summary>
        /// <param name="_hostingEnvironment"></param>
        /// <returns></returns>
        public async Task<IActionResult> ManySaveFile([FromServices] IWebHostEnvironment _hostingEnvironment)
        {
            try
            {
                long size = 0;   //统计上传文件的大小(单位b)
                var files = Request.Form.Files;  //获取文件
                if (files.Count == 0)
                {
                    return Json(new { status = "error", msg = "上传内容为空", data = "" });
                }
                List<string> rUrlList = new List<string>();
                //多文件遍历上传
                foreach (var file in files)
                {
                    //获取文件扩展名
                    var fileName = file.FileName;
                    int idxStart = fileName.LastIndexOf(".");
                    string areviation = fileName.Substring(idxStart, fileName.Length - idxStart);

                    //编辑文件的存储路径
                    var filePath = _hostingEnvironment.ContentRootPath + @"\DownLoad\Picture\";
                    if (!Directory.Exists(filePath))
                    {
                        Directory.CreateDirectory(filePath);
                    }
                    //编辑文件的名称(目前是随机命名,如果用原名保存,需要判重)
                    var myFileName = $"{Guid.NewGuid().ToString()}{areviation}";
                    //最终路径
                    var finalPath = filePath + myFileName;
                    size += file.Length;
                    using (FileStream fs = System.IO.File.Create(finalPath))
                    {
                        await file.CopyToAsync(fs);
                        await fs.FlushAsync();
                    }

                    //DB中存储的或者返回给前端的都是相对路径
                    string relativeUrl = $"/DownLoad/Picture/{myFileName}";
                    rUrlList.Add(relativeUrl);

                }
                return Json(new { status = "ok", msg = "上传成功", data = rUrlList });
            }
            catch (Exception ex)
            {
                return Json(new { status = "error", msg = "上传失败", data = "" });
            };
        } 
        #endregion

View Code