Skip to content

Commit

Permalink
enhance wxm support
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiyee
tiyee committed Jun 26, 2022
1 parent 332d7fa commit 8778974
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 147 deletions.
111 changes: 0 additions & 111 deletions browser-build.js
View file

This file was deleted.

21 changes: 11 additions & 10 deletions src/uploader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,24 +157,25 @@ loadNext()
export class Uploader {
private ctx: IContext
private file: File
private maxConcurrency = 5
private totalSize: number
private readonly maxConcurrency :number
private readonly totalSize: number
private uploadedSize = 0
private chunksize: number
private readonly chunksize: number
private digest = ''
private fileDigest: IFileDigest
private request: IRquest = httpClient
private tasks: Array<number>
private chunks: IChunk[] = []
private readonly totalChunks:number
constructor(ctx: IContext, file: File) {
this.ctx = ctx
this.file = file
this.totalSize = file.size
this.chunksize = this.ctx.chunkSize || 2097152 //defalut 2M
this.ctx.withCredentials = this.ctx.withCredentials||'include'
const chunks = Math.ceil(this.totalSize / this.chunksize)
this.maxConcurrency = Math.min(chunks, this.ctx.maxConcurrency || 5)
this.tasks = Array.from({length: chunks}, (_, index) => {
this.totalChunks = Math.ceil(this.totalSize / this.chunksize)
this.maxConcurrency = Math.min(this.totalChunks, this.ctx.maxConcurrency || 5)
this.tasks = Array.from({length: this.totalChunks}, (_, index) => {
return index
})

Expand All @@ -197,10 +198,10 @@ export class Uploader {
this.request(uploadUrl + '?' + params.toString(), 'POST', headers,withCredentials, blob, (d: IUploadPartRet) => {
if (d.error === 0) {
_this.chunks.push({index: idx, etag: d.data.etag})
if (idx < _this.chunks.length - 1) {
if (idx < _this.totalChunks - 1) {
_this.uploadedSize += _this.chunksize
} else {
_this.uploadedSize += _this.totalSize - _this.chunksize * (_this.chunks.length - 1)
_this.uploadedSize += _this.totalSize - _this.chunksize * (_this.totalChunks - 1)
}
_this.progress({uploadedSize: _this.uploadedSize, totalSize: _this.totalSize})
}
Expand Down Expand Up @@ -281,10 +282,10 @@ export class Uploader {

for (let i = 0; i < this.chunks.length; i++) {
const chunk = this.chunks[i]
if (chunk.index < this.chunks.length - 1) {
if (chunk.index < this.totalChunks - 1) {
this.uploadedSize += this.chunksize
} else {
this.uploadedSize += this.totalSize - this.chunksize * (this.chunks.length - 1)
this.uploadedSize += this.totalSize - this.chunksize * (this.totalChunks - 1)
}
this.progress({uploadedSize: this.uploadedSize, totalSize: this.totalSize})
}
Expand Down
31 changes: 18 additions & 13 deletions wxm/libs/uploader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const wxFileDigest = (obj, fn) => {
tempFilePath,
totalSize,
} = obj,
chunkSize = 2097152, // Read in chunks of 2MB
chunkSize = 2014*1024, // Read in chunks of 1MB
chunks = Math.ceil(totalSize / chunkSize),
spark = new SparkMD5.ArrayBuffer()

Expand Down Expand Up @@ -50,14 +50,17 @@ class WxUploader {
constructor(ctx, tempFilePath) {
this.ctx = ctx
this.tempFilePath = tempFilePath
this.chunkSize = this.ctx.chunkSize || 2097152 //defalut 2M
this.chunkSize = this.ctx.chunkSize || 1024*1024 //defalut 1M
this.chunks = []
this.uploadedSize=0
this.totalChunks=0
}
// 主要是获取文件信息
_beforeInit = (cb) => {
const _this = this;
const fn = () => {
const chunks = Math.ceil(_this.totalSize / _this.chunkSize)
_this.totalChunks=chunks
_this.maxConcurrency = Math.min(chunks, _this.ctx.maxConcurrency || 5)
_this.tasks = Array.from({ length: chunks }, (_, index) => {
return index
Expand Down Expand Up @@ -145,26 +148,26 @@ class WxUploader {
const d = resp.data
if (d.error === 0) {
_this.chunks.push({ index: idx, etag: d.data.etag })
if (idx < _this.chunks.length - 1) {
_this.uploadedSize += _this.chunksize
if (idx < _this.totalChunks - 1) {
_this.uploadedSize += _this.chunkSize
} else {
_this.uploadedSize += _this.totalSize - _this.chunksize * (_this.chunks.length - 1)
_this.uploadedSize += (_this.totalSize - _this.chunkSize * (_this.totalChunks - 1))
}
_this.progress({ uploadedSize: _this.uploadedSize, totalSize: _this.totalSize })
_this.progress({total:_this.totalChunks,idx, uploadedSize: _this.uploadedSize, totalSize: _this.totalSize })
}
cb()
}
})
}
success = (d) => { console.log(d); this.complete(d) }
progress = (d) => { console.log(d) }
progress = (d) => { console.log('progress',d) }
fail = (e) => { console.log(d) }
complete = (e) => {
console.log(e)
}
on(event, callback) {
switch (event) {
case 'progess':
case 'progress':
this.progress = callback
break
case 'retry':
Expand All @@ -184,10 +187,10 @@ class WxUploader {
const _this = this;
for (let i = 0; i < _this.chunks.length; i++) {
const chunk = _this.chunks[i]
if (chunk.index < this.chunks.length - 1) {
this.uploadedSize += this.chunksize
if (chunk.index < this.totalChunks-1) {
this.uploadedSize += this.chunkSize
} else {
this.uploadedSize += this.totalSize - this.chunksize * (this.chunks.length - 1)
this.uploadedSize += this.totalSize - this.chunkSize * (this.chunkSize - 1)
}
this.progress({ uploadedSize: this.uploadedSize, totalSize: this.totalSize })
}
Expand All @@ -200,8 +203,8 @@ class WxUploader {
resolve(index)
return
}
const start = task * _this.chunksize
const end = start + _this.chunksize >= _this.totalSize ? _this.totalSize : start + _this.chunksize
const start = task * _this.chunkSize
const end = start + _this.chunkSize >= _this.totalSize ? _this.totalSize : start + _this.chunkSize
fileManager.readFile({
filePath: _this.tempFilePath,
position: start,
Expand Down Expand Up @@ -255,6 +258,8 @@ class WxUploader {
this.uploadPart(d)
break
case 2:
this.uploadedSize=this.totalSize
this.progress({ uploadedSize: this.uploadedSize, totalSize: this.totalSize })
this.success(d)
}
console.log(d)
Expand Down
46 changes: 34 additions & 12 deletions wxm/pages/test/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@

const WxUploader=require('../../libs/uploader')
// pages/test/index.js
const WxUploader = require('../../libs/uploader')
Page({

/**
* 页面的初始数据
*/
data: {

percent: 0
},

/**
Expand All @@ -20,8 +20,8 @@ Page({
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log( new sMD5.ArrayBuffer())



},

Expand Down Expand Up @@ -66,15 +66,17 @@ Page({
onShareAppMessage: function () {

},
click:function(){
click: function () {
const _this = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
success(res) {
// tempFilePath可以作为 img 标签的 src 属性显示图片
const tempFilePaths = res.tempFilePaths
console.log(tempFilePaths);
_this.setData({percent:0})
const ctx = {
maxConcurrency: 5,
totalSize: 0,
Expand All @@ -84,13 +86,33 @@ Page({
touchUrl: 'https://tiyee.cn/2/uploader/init',
testChunks: false,
verfiyUrl: '',
headers: {Token: ''},
headers: { Token: '' },
withCredentials: 'include',
}
const uploader=new WxUploader(ctx,tempFilePaths[0])
}
const uploader = new WxUploader(ctx, tempFilePaths[0])
uploader.on('success',(e)=>{
wx.showModal({
title: '地址',
content: e.url,
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})

})
uploader.on('progress', (e) => {
_this.setData({
percent: e.totalSize === 0 ? 0 :parseInt( e.uploadedSize * 100 / e.totalSize)
})
}
)
uploader.run()

}
})
}
})
})
8 changes: 7 additions & 1 deletion wxm/pages/test/index.wxml
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,8 @@
<!--pages/test/index.wxml-->
<button bindtap="click" type="primary">点击选择图片</button>
<view style="width:90%;margin: 20rpx auto">
<button bindtap="click" type="primary">点击选择图片</button>
<view class="progress-box">
<progress percent="{{percent}}" show-info stroke-width="3"/>
</view>
</view>

0 comments on commit 8778974

Please sign in to comment.