.Net Core上传组件_.Net Core图片上传组件_Uploader7.0

一、.Net Core上传组件Uploader7.0简介

1.当前版本v7.0，前端框架丰富升级

2.前端jquery框架封装,cover.js, 腾讯云cos-js-sdk-v5.min.js

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

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

最新版本资料请参考官网：uploader上传控件介绍 - 微工具集

二、后端安装，前端引入，参考之前文章：.Net Core上传组件_.Net Core图片上传处理组件_uploadcore_天马3798的博客-CSDN博客

提醒：安装v6.0或者v.5.0系列

三、配置使用说明

1.type ,控件类型

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

2.uploadType，上传协议类型

 uploadType: 1,//上传处理方式

1-----Ajax上传处理（默认）  

2----WebSocket上传处理（主要用于应对单文件上传）

 3----tencent 腾讯云上传模式

3.其他参数：

subfolder: '',//指定后台保存的子文件夹
more: false, //是否支持多个文件；默认 0不支持多个文件上传，2；支持多个文件上传，但是是一个一个的； 3：支持多文件多连接上传
moreCount:5,//最多支持上传个数
debug: false, //如果是调试模式，指定输出内容

maxWidth: 1960,//前台压缩时，最大宽度
maxHeight: 1000,//前台压缩时，最大高度
minWidth: 300,//前台压缩时，最小宽度
minHeight: 300,//前台压缩时，最小高度
background: 'white',// 在使用到背景处理时的，默认背景
tempFile: uploadCfg.tempFile,//设置临时文件夹
auto: true,//是否自动上传文件
isImg: false,//是否是图片，如果是图片提供预览功能
quality:0.8,//默认导出图片质量大小 0-1
fileExts: 'jpg;png;gif;bmp;jpeg',//允许上传的文件扩展名，*----没有显示
timeout: 30000,

四、使用案例整理，常见6打场景

1.简单文件上传，single

    /*******使用WebScoket 方式处理传输*******/
    var uploader = $('#uploadBtn').uploader({
        url: 'ws://' + location.host + '/upload/common',
        fileExts:'*',
        text: '简单上传按钮',
        maxSize:1024*1024*1000,
        more:true,
        debug:true,
        onSuccess: function (data) {
            console.info(data);
            $('#name').text(data.newName);
            $('#relativeName').text(data.relativeName);
        }
    });

2.图片压缩上画攒+不改变图片比例，imgsingle

        /*******使用WebScoket 方式处理传输*******/
    var uploader = $('#uploadBtn').uploader({
        url: 'ws://' + location.host + '/upload/common',
        fileExts:'jpg;png;gif;jpeg',
        text: '图片上传按钮',
        type:'imgsingle',
        maxSize:1024*1024*1000,
        more:true,
        //isImg:true,
        debug:true,
        maxWidth: 1200,
        maxHeight: 1200,
        onSuccess: function (data) {
            console.info(data);
            $('#name').append('
'+data.newName+'
');
            $('#relativeName').append('
'+data.relativeName+'
');
            $('#result').append('')
        }
    });

3.固定大小图片上传+裁剪图片，fixedcut

    /*******使用WebScoket 方式处理传输*******/
    var uploader = $('#uploadBtn').uploader({
        url: 'ws://' + location.host + '/upload/common',
        fileExts:'jpg;png;gif;jpeg',
        text: '图片上传按钮',
        type:'fixedcut',
        maxSize:1024*1024*1000,
        more:true,
        //isImg:true,
        debug:true,
        maxWidth: 200,
        maxHeight: 200,
        onSuccess: function (data) {
            console.info(data);
            $('#name').append('
'+data.newName+'
');
            $('#relativeName').append('
'+data.relativeName+'
');
            $('#result').append('')
        }
    });

4.大小图上传+不改变图片比例，imgdouble

    /*******使用WebScoket 方式处理传输*******/
    var uploader = $('#uploadBtn').uploader({
        url: 'ws://' + location.host + '/upload/common',
        fileExts: "jpg;png",
        text: '选择图片',
        maxSize: 1024 * 1024 * 1000,
        more: true,
        debug: true,
        type: "imgdouble",
        minWidth: 100,
        minHeight: 100,
        maxWidth: 1200,
        maxHeight: 1200,
        onSuccess: function (data) {
            console.info(data);
            var small = data.small;
            var big = data.big;

            $('#imgSmallInfo #name').text(small.newName);
            $('#imgSmallInfo #relativeName').text(small.relativeName);
            $('#imgSmallInfo img').attr('src', small.relativeName);


            $('#imgBigInfo #name').text(big.newName);
            $('#imgBigInfo #relativeName').text(big.relativeName);
            $('#imgBigInfo img').attr('src', big.relativeName);
        }
    });

5.大小图上传+裁剪图片压缩，cutdouble

    /*******使用WebScoket 方式处理传输*******/
    var uploader = $('#uploadBtn').uploader({
        url: 'ws://' + location.host + '/upload/common',
        fileExts: "jpg;png",
        text: '选择图片',
        maxSize: 1024 * 1024 * 1000,
        more: true,
        debug: true,
        type: "cutdouble",
        minWidth: 100,
        minHeight: 100,
        maxWidth: 1200,
        maxHeight: 1200,
        onSuccess: function (data) {
            console.info(data);
            var small = data.small;
            var big = data.big;

            $('#imgSmallInfo #name').text(small.newName);
            $('#imgSmallInfo #relativeName').text(small.relativeName);
            $('#imgSmallInfo img').attr('src', small.relativeName);

            $('#imgBigInfo #name').text(big.newName);
            $('#imgBigInfo #relativeName').text(big.relativeName);
            $('#imgBigInfo img').attr('src', big.relativeName);
        }
    });

6.选择裁剪图片上传，dialog

        /*******使用WebScoket 方式处理传输*******/
    var uploader = $('#uploadBtn').uploader({
        url: 'ws://' + location.host + '/upload/common',
        fileExts:'jpg;png;gif;jpeg',
        text: '图片上传按钮',
        type:'dialog',
        maxSize:1024*1024*1000,
        more:false,
        debug:true,
        coverParams: {
          title:'选择头像',
          targetWidth:300,
          targetHeight:300
        },
        onSuccess: function (data) {
            console.info(data);
            $('#name').text(data.newName);
            $('#relativeName').text(data.relativeName);
            $('img').attr('src',data.relativeName)
        }
    });

7.上传腾讯云（内部使用，了解更多添加微信：tianma104，私聊）

    /*******使用tencent 方式处理传输 视频 mp4*******/
    //不需要指定上传路径
    var uploader = $('#uploadBtn').uploader({
        fileExts: 'mp4',
        text: '视频上传按钮',
        type: 'single',
        maxSize: 1024 * 1024 * 1000,
        more: false,
        debug: true,
        uploadType: 3,//使用腾讯云方式
        //oldFileName: '1677044999702-35.mp4',  // 重点指定就的视频文件名，可以执行远程删除任务
        oldFileName:'',
        onSuccess: function (data) {
            console.info(data);
            $('#name').text(data.newName);
            $('#relativeName').text(data.absoluteName);
            $('video').attr('src', data.absoluteName)
        }
    });

更多：

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

Asp.Net Core WebSocket绑定

删除github上的远程分支