.Net Core WebApi上传图片的两种方式

我这边主要是为了上传图片,话不多说,上代码。

方式一:通过Form表单上传

后端:

复制代码
     /// 
        /// 上传图片,通过Form表单提交
        /// 
        /// 
        [Route("Upload/FormImg")]
        [HttpPost]
        public ActionResult UploadImg(List files)
        {
            if (files.Count<1)
            {
                return Error("文件为空");
            }
            //返回的文件地址
            List filenames = new List();            
            var now = DateTime.Now;
            //文件存储路径
            var filePath = string.Format("/Uploads/{0}/{1}/{2}/", now.ToString("yyyy"), now.ToString("yyyyMM"), now.ToString("yyyyMMdd"));
            //获取当前web目录
            var webRootPath = _hostingEnvironment.WebRootPath;
            if (!Directory.Exists(webRootPath + filePath))
            {
                Directory.CreateDirectory(webRootPath + filePath);
            }
            try
            {
                foreach (var item in files)
                {
                    if (item != null)
                    {
                        #region  图片文件的条件判断
                        //文件后缀
                        var fileExtension = Path.GetExtension(item.FileName);

                        //判断后缀是否是图片
                        const string fileFilt = ".gif|.jpg|.jpeg|.png";
                        if (fileExtension == null)
                        {
                            break;
                            //return Error("上传的文件没有后缀");
                        }
                        if (fileFilt.IndexOf(fileExtension.ToLower(), StringComparison.Ordinal) <= -1)
                        {
                            break;
                            //return Error("请上传jpg、png、gif格式的图片");
                        }

                        //判断文件大小    
                        long length = item.Length;
                        if (length > 1024 * 1024 * 2) //2M
                        {
                            break;
                            //return Error("上传的文件不能大于2M");
                        }

                        #endregion

                        var strDateTime = DateTime.Now.ToString("yyMMddhhmmssfff"); //取得时间字符串
                        var strRan = Convert.ToString(new Random().Next(100, 999)); //生成三位随机数
                        var saveName = strDateTime + strRan + fileExtension;

                        //插入图片数据                 
                        using (FileStream fs = System.IO.File.Create(webRootPath + filePath + saveName))
                        {
                            item.CopyTo(fs);
                            fs.Flush();
                        }
                        filenames.Add(filePath + saveName);
                    }
                }
                return Success(filenames);
            }
            catch (Exception ex)
            {
                //这边增加日志,记录错误的原因
                //ex.ToString();
                return Error("上传失败");
            }
        }
复制代码

我这里主要是为了提交图片数据,所以有比较多的对图片文件的条件判断,这里可以根据需求,自行调整。包括文件的存储方式。

 

前端:

复制代码



    .Net Core WebApi图片上传
    
    
    


通过form表单提交

上传的图片,返回的地址

复制代码

除了上传写的提交方式,另外还有两种提交数据的方式:

方式二:

复制代码
function  uplpadfile(){
        //获取表单的数据        
        var formdata = new FormData(document.getElementById("myform"));

        $.ajax({
            type:'Post',
            data:formdata,                        
            contentType: false,
            processData: false,
            url:"https://localhost:44376/Upload/FormImg",
            success:function(result){
                if (result.Success) {
                    var imglist =result.Data; 
                    for(var i in imglist){
                        $("#imglist").append('');
                    }                    
                }else{                    
                    alert('提交失败,重新尝试提交');
                }                            
            }
        })
    };
复制代码

 

 方式三:

复制代码
复制代码

  

前端这里,要注意几点:

 1、Form表中一定要加上  enctype="multipart/form-data"  标签

 2、文件上传的 file 控件上,如果要一次上传多张图片,需要加上 multiple 标签

 3、方式一中: formdata.append("files", files[i])   的  files  必须和接口接受文件的参数名一致

 4、方式二和方式三中:  中的 name 必须和接口接受文件的参数名一致

 

通过Form提交文件的方式总结:

前端提交文件的三种方式都可以使用。

如果文件需要和表单中其他数据一起提交,可以使用方式二和方式三。

如果只要单独提交一个文件数据,可以使用方式一。

 

====================华丽的分割线====================

 

方式二:通过Base64字符上传

后端:

复制代码
     /// 
        /// 文件上传,Base64
        /// 
        /// Base64
        /// 文件名
        /// 
        [HttpPost]
        [Route("Upload/Base64")]
        public ActionResult UploadBase64(string fileBase64, string fileName)
        {
            byte[] bytes = fileBase64.ToBytes_FromBase64Str();
            var fileExtension = Path.GetExtension(fileName);
            var strDateTime = DateTime.Now.ToString("yyMMddhhmmssfff"); //取得时间字符串
            var strRan = Convert.ToString(new Random().Next(100, 999)); //生成三位随机数
            var saveName = strDateTime + strRan + fileExtension;
            var savePath = "Upload/Img/" + DateTime.Now.ToString("yyyyMMdd") + "/" + saveName;
            string filePath = "https://oss.tiaobox.com/" + savePath;
            try
            {
                //将文件上传到阿里云oss
                using (MemoryStream m = new MemoryStream(bytes))
                {
                    var client = new OssClient(aliyunconfig.EndPoint, aliyunconfig.AccessKeyID, aliyunconfig.AccessKeySecret);
                    PutObjectRequest _objRequest = new PutObjectRequest(aliyunconfig.BucketName, savePath, m);
                    client.PutObject(_objRequest);
                }
                return Success(filePath);
            }
            catch (Exception ex)
            {
                WriteSysLog(ex.ToString(), Entity.Base_SysManage.EnumType.LogType.接口调用异常);
                return Error("上传失败!");                
            }
            
        }
复制代码

 

这个后端方法,每次只能上传一个文件,前端需要把文件转成Base64的字符提交。

这里保存数据的方式,是保存到阿里云的OSS上,也可以采用上面的方法,保存的本地。最终都是返回文件的路径。

 

前端:

复制代码



    .Net Core WebApi图片上传
    
    
    


通过文件转为Base64字符提交

复制代码

 

这里需要注意的是文件在前端转成Base64字符后,需要在字符的前面去掉文件的格式标签。不然到后端会无法正常读取Base64的字符。

或者在后端接收数据后,做处理也可以。

 

补充:

_hostingEnvironment的定义

复制代码
private readonly IHostingEnvironment _hostingEnvironment;
        public UploadController(IHostingEnvironment hostingEnvironment,IOptions _aliyunconfig)
        {
            _hostingEnvironment = hostingEnvironment;
            aliyunconfig = _aliyunconfig.Value;
        }
复制代码

 

ToBytes_FromBase64Str  是对  String 类的方法扩展

  public static byte[] ToBytes_FromBase64Str(this string base64Str)
  {
        return Convert.FromBase64String(base64Str);
  }

 

 如果有什么错误或者欠缺的地方,欢迎指正,互相学习。

 

 

文章参考,里面还有讲述关于大文件的上传:

https://www.cnblogs.com/seabluescn/p/9229760.html

 

转:https://www.cnblogs.com/leoxuan/articles/11087121.html

你可能感兴趣的:(.Net Core WebApi上传图片的两种方式)