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

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

方式一:通过Form表单上传

后端:

.Net Core WebApi上传图片的两种方式
     /// <summary>
        /// 上传图片,通过Form表单提交
        /// </summary>
        /// <returns></returns>
        [Route("Upload/FormImg")]
        [HttpPost]
        public ActionResult UploadImg(List<IFormFile> files)
        {
            if (files.Count<1)
            {
                return Error("文件为空");
            }
            //返回的文件地址
            List<string> filenames = new List<string>();            
            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上传图片的两种方式

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

 

前端:

.Net Core WebApi上传图片的两种方式
<!DOCTYPE html>
<html>
<head>
    <title>.Net Core WebApi图片上传</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.form.min.js"></script>
</head>
<body>
<h1>通过form表单提交</h1>
<form id="myform" name="myform" method="post" enctype="multipart/form-data" 
                    action="https://localhost:44376/Upload/FormImg">
    <input type="file" name="files" id="files" value="选择需要上传的文件" multiple />
    <input type="button" id="submitbtn" value="提交" onclick="uplpadfile()">
</form>

<div>
   上传的图片,返回的地址
   <div id="imglist">
</div> </div> <script type="text/javascript">

    //前端第一种提交方式 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:"https://localhost:44376/Upload/FormImg", success:function(result){ if (result.Success) { var imglist =result.Data; for(var i in imglist){ $("#imglist").append(‘<img src="‘+imglist[i]+‘"/>‘); } }else{ alert(‘提交失败,重新尝试提交‘); } } }) }; </script> </body> </html>
.Net Core WebApi上传图片的两种方式

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

方式二:

.Net Core WebApi上传图片的两种方式
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(‘<img src="‘+imglist[i]+‘"/>‘);
                    }                    
                }else{                    
                    alert(‘提交失败,重新尝试提交‘);
                }                            
            }
        })
    };
</script>
.Net Core WebApi上传图片的两种方式

 

 方式三:

.Net Core WebApi上传图片的两种方式
<script type="text/javascript">
    function  uplpadfile(){

        $("#myform").ajaxSubmit(function(result){
            if (result.Success) {
                var imglist =result.Data; 
                for(var i in imglist){
                    $("#imglist").append(‘<img src="‘+imglist[i]+‘"/>‘);
                }                    
            }else{                    
                alert(‘提交失败,重新尝试提交‘);
            }
        });
        
    };
</script>
.Net Core WebApi上传图片的两种方式

  

前端这里,要注意几点:

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

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

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

 4、方式二和方式三中:<input type="file" name="files">  中的 name 必须和接口接受文件的参数名一致

 

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

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

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

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

 

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

 

方式二:通过Base64字符上传

后端:

.Net Core WebApi上传图片的两种方式
     /// <summary>
        /// 文件上传,Base64
        /// </summary>
        /// <param name="fileBase64">Base64</param>
        /// <param name="fileName">文件名</param>
        /// <returns></returns>
        [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("上传失败!");                
            }
            
        }
.Net Core WebApi上传图片的两种方式

 

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

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

 

前端:

.Net Core WebApi上传图片的两种方式
<!DOCTYPE html>
<html>
<head>
    <title>.Net Core WebApi图片上传</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.form.min.js"></script>
</head>
<body>
<h1>通过文件转为Base64字符提交</h1>

<input type="file" name="basefile" id="basefile" value="选择需要上传的文件" multiple />


<script type="text/javascript">
    $("#basefile").change(function(){
        var basefile = base64(document.getElementById("basefile"));
    })

    //上传文件
    function updateBackground(filename,imgurl){

      //提交前,去除格式标记
      imgurl =  imgurl.replace("data:image/jpeg;base64,", "").replace("data:image/png;base64,", "").replace("data:image/jpg;base64,", "").replace("data:image/gif;base64,", "").replace("data:image/bmp;base64,", "");
      // urlElement.innerHTML = imgurl;
      var businessParam = {
            fileBase64:imgurl,
            fileName:filename
        };

      $.ajax({
        url:‘https://localhost:44376/Upload/Base64‘,
        data:businessParam,
        type:‘post‘,
        dataType:‘json‘,
        success:function(result){
            if (result.Success) {
                alert("上传成功");
            }else{                    
                alert("上传失败");
            }                
        },
        error: function(data) {                
            alert("error:"+data.Error);
        }
      })

    }


    //文件转为Base64
    function base64(file) {
        if (typeof (FileReader) === ‘undefined‘) {
           alert("抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!");
        }
        var reader = new FileReader();            
        var pos = file.files[0].name.lastIndexOf(".");
        var type = file.files[0].name.substring(pos + 1);            
        //判断文件格式
        if (type.toLowerCase() != "png" && type.toLowerCase() != ‘jpg‘ && type.toLowerCase() != ‘jpeg‘ && type.toLowerCase() != ‘gif‘ && type.toLowerCase() != ‘bmp‘) {
            alert("格式错误,请上传‘png、jpg、jpeg、bmp、gif‘格式文件");
            return;
        }
        
        reader.onloadend = (
            function(e) {
                imgurl = e.target.result;
                updateBackground(file.files[0].name,imgurl);
            }
        );        
        // Read the file
        reader.readAsDataURL(file.files[0]);
        
    }
</script>
</body>
</html>
.Net Core WebApi上传图片的两种方式

 

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

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

 

补充:

_hostingEnvironment的定义

.Net Core WebApi上传图片的两种方式
private readonly IHostingEnvironment _hostingEnvironment;
        public UploadController(IHostingEnvironment hostingEnvironment,IOptions<AliyunConfig> _aliyunconfig)
        {
            _hostingEnvironment = hostingEnvironment;
            aliyunconfig = _aliyunconfig.Value;
        }
.Net Core WebApi上传图片的两种方式

 

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上传图片的两种方式

上一篇:AcWing 44. 分行从上往下打印二叉树


下一篇:WIN10关闭同步主机服务