微信小程序上传组件封装uploadHelper2.0使用整理

一、uploadHelper2.0使用步骤说明

uploadHelper.js ---上传代码封装库

cos-wx-sdk-v5.min.js---腾讯云，对象存储封装库

第一步，下载组件代码，放置到自己的小程序项目中

第二步、 创建上传对象，执行选择图片/视频

    var _this = this;
    //选择图片并上传
    var upload = new Upload(this, {
      type: 'single',
      onSuccess: res => {
        var relativeName = res.relativeName;
        _this.setData({
          src1: _this.data.domain + relativeName
        });
      }
    });
    upload.choose();

第三步、.Net 后台安装 Uploader8.0 最新版本接受上传内容

        /*********Form 方式使用**********/
        public void Form()
        {
            try
            {
                FormReceiver _receive = new FormReceiver(this.HttpContext);
                //接收文件成功
                _receive.OnSuccess = (data) =>
                {
                    // Write(string.Format("新文件名{0},旧文件名{1}", data.NewName, data.OldName));
                };
                _receive.DoWork();
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

二、图片上传使用案例

参数说明：

/**
 * 上传控件封装，v2.0
 * 增加视频上传处理
 * 
 * 上传类型：type
 * 1.single,不改变图片大小，但是压缩质量上传；适合大图上传
 * 2.imgsingle，不改变图片的比例，在指定范围内等比例缩放 （默认上传模式，适用高，压缩率高），最大尺寸，大图(maxWidth*maxHeight)
 * 3.fixedcut，固定比例缩放(maxWidth*maxHeight)，最大化图片剪切
 * 4.cutdouble，固定最小图(minWidth*minHeight)，最大图(maxWidth*maxHeight)，裁剪图片
 * 5.imgdouble，常用缩略图模式，不改变原图片的比例，在指定范围内等比例缩放，小图(minWidth*minHeight); 大图((maxWidth*maxHeight))
 * 7.videosingle, 视频压缩上传默认---chooseVideo()
 * 8.videotencent,视频腾讯云上传模式---chooseVideo()------（特别说明，视频目前进支持腾讯云上传）
 * 
 * 参数说明：
 * url:上传地址
 * count: 可上传数量,最大值20
 * maxWidth，maxHeight:大图片上线
 * minWidth,minHeight: 小图上线
 * auto:是否自动上传
 * onSuccess:一张图片上传成功
 * onError:图片上传失败
 */

1.single 简单图片上传------如上代码案例就是

2.imgsingle  案例

不改变图片的比例，在指定范围内等比例缩放 （默认上传模式，适用高，压缩率高），最大尺寸，大图(maxWidth*maxHeight)

<button bind:tap="imgsingleClick">
  imgsingle 压缩上传上传
</button>
<image src="{{src2}}" mode="" />
<view class="line"></view>

<!-- 上传控件 -->
<view style='width:1px;height:1px;overflow:hidden;position: fixed;left:10000px;top:0px;'>
  <canvas id='CanvasUpload' type="2d" style='width:{{canWidth}}px;height:{{canHeight}}px;'></canvas>
</view>

  imgsingleClick() {
    var _this = this;
    //选择图片并上传
    var upload = new Upload(this, {
      type: 'imgsingle',
      maxWidth: 500,
      maxHeight: 500,
      onSuccess: res => {
        var relativeName = res.relativeName;
        _this.setData({
          src2: _this.data.domain + relativeName
        });
      }
    });
    upload.choose();
  },

3.fixedcut 案例

固定比例缩放(maxWidth*maxHeight)，最大化图片剪切

  fixedcutClick() {
    var _this = this;
    //选择图片并上传
    var upload = new Upload(this, {
      type: 'fixedcut',
      maxWidth: 500,
      maxHeight: 500,
      onSuccess: res => {
        var relativeName = res.relativeName;
        _this.setData({
          src3: _this.data.domain + relativeName
        });
      }
    });
    upload.choose();
  },

4.cutdouble 案例

固定最小图(minWidth*minHeight)，最大图(maxWidth*maxHeight)，裁剪图片

  cutdoubleClick() {
    var _this = this;
    var imgList=[];
    //选择图片并上传
    var upload = new Upload(this, {
      type: 'cutdouble',
      minWidth: 300,
      minHeight: 300,
      maxWidth: 1000,
      maxHeight: 1000,
      onSuccess: res => {
        console.info(res);
        var srcsmall = _this.data.domain + res.small.relativeName;
        var srcbig = _this.data.domain + res.big.relativeName;
        _this.setData({
          srcsmall: srcsmall,
          srcbig: srcbig
        });
      },
      onAllSuccess:res=>{
     
      }
    });
    upload.choose();
  },

5.imgdouble 缩略图案例

常用缩略图模式，不改变原图片的比例，在指定范围内等比例缩放，小图(minWidth*minHeight); 大图((maxWidth*maxHeight))

  imgdoubleClick() {
    var _this = this;
    var imgList = [];
    //选择图片并上传
    var upload = new Upload(this, {
      type: 'imgdouble',
      minWidth: 300,
      minHeight: 300,
      maxWidth: 1000,
      maxHeight: 1000,
      onSuccess: res => {
        console.info(res);
        var srcsmall = _this.data.domain + res.small.relativeName;
        var srcbig = _this.data.domain + res.big.relativeName;
        _this.setData({
          srcsmall: srcsmall,
          srcbig: srcbig
        });
      },
      onAllSuccess: res => {
      }
    });
    upload.choose();
  },

三、视频上传使用案例chooseVideo()

1.videosingle  ---视频压缩切片上传（暂时没有封装，2.0版本忽略）

2.videotencent 案例 ---视频腾讯云上传模式---chooseVideo()------（特别说明，视频目前进支持腾讯云上传）

使用步骤：

1. 小程序上传 白名单，添加配置 上传域名+ 视频播放域名

2. 配置 腾讯云 对象存储参数如下

3. 页面实现功能代码：

<button bind:tap="videotencentClick">选择视频文件</button>

<video src="{{videourl}}" />

  videotencentClick() {
    var _this = this;
    /***
     * 
     * 特别说明，暂时不支持视频上传到自建服务器
     */
    //选择图片并上传
    var upload = new Upload(this, {
      type: 'videotencent',
      onSuccess: res => {
        var videourl = res.absoluteName;
        _this.setData({
          videourl
        });
      },
      onAllSuccess: res => {}
    });
    upload.chooseVideo(); //选择视频
  },

上传效果：

更多：

维信小程序禁止截屏/录屏

微信小程序canvas 使用案例（一）

微信小程序数组绑定使用案例（二）