一、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 使用案例(一)
微信小程序数组绑定使用案例(二)
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 微信小程序上传组件封装uploadHelper2.0使用整理
发表评论 取消回复