zoukankan      html  css  js  c++  java
  • DotNetCore 微服务上传附件

    后台接口升级成netcore 2.0了,然后之前的上传图片的接口就不再使用了。新的接口形式

    #region IFormCollection
    /// <summary>
    /// IFormCollection
    /// </summary>
    /// <param name="files"></param>
    /// <returns></returns>
    [HttpPost("UploadFiles")]
    public IActionResult UploadFiles(IFormCollection files)
    {
        try
        {
            var Files = Request.Form.Files;
            long size = Files.Sum(f => f.Length);
            //size > 100MB refuse upload !
            if (size > 104857600)
            {
                return Json(ResponseHelper.Error_Msg_Ecode_Elevel_HttpCode("files total size > 100MB , server refused !"));
            }
    
            List<string> filePathResultList = new List<string>();
            foreach (var file in Files)
            {
                var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                string filePath = hostingEnv.WebRootPath + @"" + "Files" + @"files";
                if (!Directory.Exists(filePath))
                {
                    Directory.CreateDirectory(filePath);
                }
                fileName = DateTime.Now.ToString("yyMMddHHmmss") + "_" + Guid.NewGuid() + "." + fileName.Split('.')[1];
                string fileFullName = filePath + fileName;
                using (FileStream fs = System.IO.File.Create(fileFullName))
                {
                    file.CopyTo(fs);
                    fs.Flush();
                }
                filePathResultList.Add($"/src/files/{fileName}");
            }
            string message = $"{files.Count} file(s) /{size} bytes uploaded successfully!";
            return Json(ResponseHelper.IsSuccess_Msg_Data_HttpCode(message, filePathResultList, filePathResultList.Count));
    
        }
        catch (Exception ex)
        {
            return null;
        }
    }
    #endregion

    那么前台文件传输也有不同方式,包括

    1) 前端读取文件内容,将内容以text/xml/json/binary等形式传输。

    2)前端不做任何处理,将文件放到Form中传输

    我们来说说第二种方式

    页面是随便的只要是H5相关的即可

    @Html.HiddenFor(model => model.Photo)
    <img class="expic" src="/Content/Images/NotPic.jpg" /><br />
    <a href="javascript:$('#FileUpload').trigger('click');" class="files">@Resource.Browse</a>
    <input type="file" class="displaynone" id="FileUpload" name="FileUpload" onchange="UploadFileCenter('FileUpload','Photo');" />
    <span class="uploading">@Resource.Uploading</span>

    页面中保证有这个input type=file的即可,然后调用相应的js,传入指定的参数,第一个是这个file的id,第二个是要保存的隐藏字段,其中有个回显的动作,在js里处理了,找那个和input file同级别的img标签进行回显

    js代码如下

    function UploadFileCenter(fileInput, fileHidden) {
        var url = Constants.globalPicUrl + "/api/FileUpload/UploadFiles";
        var fileUpload = $("#" + fileInput).get(0);
        var files = fileUpload.files;
        var formData = new FormData();
        for (var i = 0; i < files.length; i++) {
            formData.append(files[i].name, files[i]);
        }
        $.ajax({
            type: "POST",
            url: url,
            contentType: false,
            processData: false,
            data: formData,
            success: function (data) {
                if (data.code == 200) {
                    $("#" + fileHidden).val(data.data[0]);
                    $("#" + fileInput).siblings("img").attr("src", Constants.globalPicUrl + data.data[0]);
                } else {
                    $.messageBox5s('@Resource.Tip', data.message);
                }
            },
            error: function () {
                $.messageBox5s('@Resource.Tip', "上传文件出现错误");
            }
        });
    }

    其实文件上传就可以直接用最简单的form提交即可。

  • 相关阅读:
    线程实现的两种方式
    webhook功能概述
    Linux 常用高频命令
    Mac安装Homebrew的正确姿势
    Mac 环境变量配置
    详解k8s零停机滚动发布微服务
    详解k8s原生的集群监控方案(Heapster+InfluxDB+Grafana)
    白话kubernetes的十万个为什么(持续更新中...)
    一个典型的kubernetes工作流程
    k8s实战之从私有仓库拉取镜像
  • 原文地址:https://www.cnblogs.com/Rexcnblog/p/9881943.html
Copyright © 2011-2022 走看看