欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 养生 > 微信小程序上传组件封装uploadHelper2.0使用整理

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

2024/10/23 11:58:50 来源:https://blog.csdn.net/u011127019/article/details/142962961  浏览:    关键词:微信小程序上传组件封装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 使用案例(一)

微信小程序数组绑定使用案例(二)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com