.Net Core上传组件_.Net Core图片上传处理组件

矫情吗；* 2022-10-24 15:26 234阅读 0赞

**一、.Net Core上传组件Uploader简介**

1.前端jquery框架封装

2.后端，支持Asp.Net 和 Asp.Net Core 矿建

3.数据传输模式支持：WebScoket 、Ajax、Form 模式上传到服务器。

最新版本资料请参考官网：[http://www.gongjuji.net/uploader/][http_www.gongjuji.net_uploader]

**二、Asp.Net Core 使用步骤 （此案例这对WebScoket方式讲解）**

注意：跟多上传方式接收，请去官网了解。

第一步：安装组件 ，根据.net Core框架，选择对应的版本

Install-Package UploadHandleCore

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70][]

第二步：配置后端文件接收，从straup 文件中 的Configure方法

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
    
                #region 绑定上传
                //绑定WebSocket处理，接收成功后，生成缩略图
               UploadHandle.ServerInfo.SitePath = env.WebRootPath; //使用wwwroot作为根目录
                app.Map("/upload/common", (con) =>
                {
                    con.UseWebSockets();//启用webscoket
                    con.Use((ctx, n) =>
                    {
                        Receiver _receive = new Receiver(ctx, "upload/logo");
                        _receive.OnSuccess += (data) =>
                        {
                        };
                        return _receive.DoWork();
                    });
                });
                #endregion
    
            }

第三步：前端组件引用，和绑定

前端组件代码下载，请点击：[http://www.gongjuji.net/uploader/][http_www.gongjuji.net_uploader]

引用内容如下：

html组件初始化如下：

<div id="uploadOne" class="uploader uploader-primary"></div>
        <script>
            $('#uploadOne').uploader({
                url: 'ws://' + location.host + '/upload/common',
                text: '选择文件',
                type: 'single',//上传类型 
                fileExts: 'jpg;png;gif;',//支持的文件类型
                maxSize: 1024 * 1024 * 5,//文件大小，单位字节
                onSuccess: function(res){
                    //上传成功触发
                    console.info(res);
                }
            });
        </script>

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70 1][]

特别说明，如果需要图片对话框剪切，请引用 Cover.js 组件，组件代码，请去官网下载。

**三、使用示例说明**

1.上传文件，配置类型 ，options配置

type: 'single',//控件类型  
                /*
                * 1.简单形式(single,单纯上传文件，自动提交)
                * 2.对话框形式(dialog，需要图片剪切处理)
                * 3.前台压缩，大小图片上传 (imgdouble) ：不改变原图片的比例，在指定范围内等比例缩放，小图(minWidth*minHeight); 大图((maxWidth*maxHeight))
                * 4.前台最大比例，图片处理（fixedsize）：固定比例缩放，最大化图片显示，剩余空间填充空白
                * 5.前台最大比例，图片剪切（fixedcut）:固定比例缩放(maxWidth*maxHeight)，最大化图片剪切
                * 6.前台裁剪，大小图处理（cutdouble）:固定最小图(minWidth*minHeight)，最大图(maxWidth*maxHeight)，裁剪图片
               
     */

onSuccess(res)\{\} ,处理上传后的逻辑

响应结果参数：

1.  newName: 上传后的文件名
2.  relativeName: 服务器上的相对地址
3.  size: 文件大小
4.  status: 1  上传状态

2.大小图上传

如果是大小图上传 ，响应结果  ：res.small  小图信息；res.big 大图信息

/**大小图片前台处理，后台简单处理模式，上传成功后显示图片**/
    var uploader = $('#uploadBtn').uploader({
        url: 'ws://www.gongjuji.net/common/upload',
        fileExts: 'jpg;png',
        text: '大小图模式上传',
        more: true,//是否可以上传多个
        auto: true, //是否自动上传
        type: 'imgdouble',
        minWidth: 100,
        minHeight: 100,
        maxWidth: 800,
        maxHeight: 600,
        handleType: '0',//对于大小图模式最好不要自动处理
        subfolder: 'touxiang',
        onSuccess: function (data) {
            //添加到列表,每个图片上传成功都会触发
            var row = $('.row');
            var col = $(' <div class="col-xs-6 col-md-3" />');
            var a = $('<a class="thumbnail" />');
            a.attr('href',  data.big.relativeName);
            a.attr('title', '点击查看大图').attr('target','_blank');
            a.append('<img src='  + data.small.relativeName + ' />');
            col.append(a);
            row.append(col);
        }
    });

3.图片剪切上传

注意：裁剪模式需要引用cover.js 组件

/*********剪切图片，后台自动处理模式+指定根目录的子文件夹保存**********/
    var uploader = $('#uploadBtn').uploader({
        url: 'ws://www.gongjuji.net/common/upload',
        fileExts: 'jpg;png',
        type: 'dialog',
        text: '剪切图片模式',
        subfolder: 'content',//默认后台处理简单模式 ，指定子文件夹
        more: false,//是否可以上传多个
        auto: true, //是否自动上传
        coverParams: {
            title: '设置头像',
            targetWidth: 100,
            targetHeight: 100
        },
        onSuccess: function (data) {
            $('#name').text(data.newName);
            $('#relativeName').attr('src', data.relativeName);
        }
    });

4.图片固定大小，最大化剪切上传

去官网看更新文章吧。。。。

## [HTTP协议简介1][HTTP_1] ##

## [C\#域名操作，正则匹配域名][C] ##

## [C\# 常见Url操作实例（一）、正则表达式匹配URl][C_ _Url_URl] ##

[http_www.gongjuji.net_uploader]: http://www.gongjuji.net/uploader/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70]: /images/20221024/ea194733529e4535897724b83657cbd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70 1]: /images/20221024/4521980a09274c78bc9bdbe66d7b53b2.png
[HTTP_1]: https://blog.csdn.net/u011127019/article/details/41412469
[C]: https://blog.csdn.net/u011127019/article/details/53032023
[C_ _Url_URl]: https://blog.csdn.net/u011127019/article/details/52538320