.Net Core上传组件_.Net Core图片上传处理组件-蒲公英云

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

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

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

1.前端jquery框架封装

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

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

最新版本资料请参考官网：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/

引用内容如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="http://cdn.jnqianle.cn/uploader/uploader6.3.min.js"></script>
    <link href="http://cdn.jnqianle.cn/uploader/uploader6.3.min.css" rel="stylesheet">

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){} ,处理上传后的逻辑

响应结果参数：

newName: 上传后的文件名
relativeName: 服务器上的相对地址
size: 文件大小
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);
    }
});