1. 小程序界面:
2. 计算文件的MD5:
3. 上传记录:
4. share.js源码:
const domain = require('../../utils/domain.js').domain
import SparkMD5 from '../../utils/spark-md5.js'
const chooseLocation = requirePlugin('chooseLocation');
Page({
/**
* 页面的初始数据
*/
data: {
uploadTask: '',
tempFiles: '',
fileName: '',
chunkNo: '',
identifier: '',
bytesPerPiece: '',
index: '',
percent: '',
media: [],
location: '',
userinfo: '',
labelList: [],
text: '',
loading_title: '',
loading_icon: '',
loading_show: false,
type: ''
},
upload(){
console.log("点击上传")
wx.chooseMedia({
count: 1,
mediaType: ['image', 'video'],
sourceType: ['album'],
success(res){
console.log(res.tempFiles[0].tempFilePath)
wx.uploadFile({
header: {
'alexmisko-user': wx.getStorageSync('token')
},
filePath: res.tempFiles[0].tempFilePath,
name: 'img',
url: domain + '/video/user',
success(res){
console.log(JSON.parse(res.data).data)
}
})
}
})
},
uploadChunk(){
var that = this
console.log('点击分片上传')
wx.chooseMedia({
count: 1,
mediaType: ['image', 'video'],
sourceType: ['album'],
success(res){
that.setData({
thumbTempFilePath: res.tempFiles[0].thumbTempFilePath
})
console.log("正在计算文件的md5......")
var index = 0
var identifier = SparkMD5.ArrayBuffer.hash(wx.getFileSystemManager().readFileSync(res.tempFiles[0].tempFilePath, ''))
that.setData({
identifier: identifier
})
var tempFiles = res.tempFiles[0]
var arr = tempFiles.tempFilePath.split('/')
var fileName = arr[arr.length-1]
that.setData({
type: fileName.split('.')[1]
})
console.log(fileName)
var bytesPerPiece = 8 * 1024 * 1024;
var chunkNo = parseInt(tempFiles.size / bytesPerPiece)
that.uploader(tempFiles, fileName, chunkNo, identifier, bytesPerPiece, index)
}
})
},
async uploader(tempFiles, fileName, chunkNo, identifier, bytesPerPiece, index){
var that = this
console.log("--------------------------------------------")
if(index < chunkNo){
var chunk = wx.getFileSystemManager().readFileSync(tempFiles.tempFilePath, '', index * bytesPerPiece, bytesPerPiece)
console.log(chunk)
try{
wx.getFileSystemManager().writeFileSync(
`${wx.env.USER_DATA_PATH}/${fileName}`,
chunk,
'utf-8'
)
} catch(e){
console.error(e)
}
var obj = {fileMD5: identifier, sliceNo: index + 1, totalSliceNo: chunkNo + 1}
var prog = index + 1
var total = chunkNo + 1
console.log(prog + '/' + total, obj);
// 上传之前做备份,以便断点续传
that.setData({
tempFiles: tempFiles,
fileName: fileName,
chunkNo: chunkNo,
bytesPerPiece: bytesPerPiece,
index: index,
})
console.log("正在上传......")
that.data.uploadTask = wx.uploadFile({
header: {
'alexmisko-user': wx.getStorageSync('token')
},
url: domain + '/video/chunk/user',
filePath: `${wx.env.USER_DATA_PATH}/${fileName}`,
name: 'file',
formData: obj,
success(res) {
console.log(res)
index ++
that.uploader(tempFiles, fileName, chunkNo, identifier, bytesPerPiece, index)
},
fail(res) {
console.log(res)
}
})
that.data.uploadTask.onProgressUpdate((res) => {
if(res.progress % 10 == 0){
that.setData({
percent: parseInt(res.progress / (that.data.chunkNo + 1) + index * 100 / chunkNo)
})
console.log('上传进度', res.progress)
console.log('已经上传的数据长度', res.totalBytesSent)
console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
}
})
}
if(index == chunkNo){
var chunk = wx.getFileSystemManager().readFileSync(tempFiles.tempFilePath, '', index * bytesPerPiece, tempFiles.size - (index * bytesPerPiece))
console.log(chunk)
try{
wx.getFileSystemManager().writeFileSync(
`${wx.env.USER_DATA_PATH}/${fileName}`,
chunk,
'utf8'
)
} catch(e){
console.error(e)
}
var obj = {fileMD5: identifier, sliceNo: index + 1, totalSliceNo: chunkNo + 1}
var prog = index + 1
var total = chunkNo + 1
console.log(prog + '/' + total, obj);
console.log("正在上传......")
wx.uploadFile({
header: {
'alexmisko-user': wx.getStorageSync('token')
},
url: domain + '/video/chunk/user',
filePath: `${wx.env.USER_DATA_PATH}/${fileName}`,
name: 'file',
formData: obj,
success(res) {
console.log(res)
console.log("---------------------上传完成!---------------------")
if(that.data.type == 'mp4'){
console.log("开始上传缩略图")
wx.uploadFile({
header: {
'alexmisko-user': wx.getStorageSync('token')
},
filePath: that.data.thumbTempFilePath,
name: 'img',
url: domain + '/video/user',
success(res1){
console.log("缩略图地址:")
var thumbUrl = JSON.parse(res1.data).data
console.log(thumbUrl)
console.log("视频地址:")
var url = JSON.parse(res.data).data
var media = {url: url, type: url.split('.')[3], digest: that.data.identifier, thumb: JSON.parse(res1.data).data}
that.data.media.push(media)
that.setData({
percent: 100,
media: that.data.media
})
console.log(url)
return;
}
})
}else{
console.log("图片地址:")
var url = JSON.parse(res.data).data
var media = {url: url, type: url.split('.')[3], digest: that.data.identifier, thumb: ''}
that.data.media.push(media)
that.setData({
percent: 100,
media: that.data.media
})
console.log(url)
return;
}
},
fail(res) {
console.log(res)
}
})
}
},
cancel(){
console.log('取消')
this.data.uploadTask.abort()
},
resume(){
console.log("继续")
this.uploader(this.data.tempFiles, this.data.fileName, this.data.chunkNo, this.data.identifier, this.data.bytesPerPiece, this.data.index)
},
close(e){
console.log('关闭')
this.data.media.splice(e.currentTarget.dataset.id, 1)
this.setData({
media: this.data.media
})
},
label(){
console.log('选择标签')
wx.navigateTo({
url: `../label/label?labelList=${JSON.stringify(this.data.labelList)}`,
})
},
location(){
// 先获取经纬度
wx.getLocation({
type: 'wgs84',
success (res) {
// 地图选点
const key = '6CFBZ-VVOWK-GIEJF-AGSB6-FFWG7-VXB3Q'; //使用在腾讯位置服务申请的key
const referer = '春禾支教'; //调用插件的app的名称
const location = JSON.stringify({
latitude: res.latitude,
longitude: res.longitude
});
const category = '生活服务,娱乐休闲';
wx.navigateTo({
url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
});
}
})
},
onShow(){
const location = chooseLocation.getLocation();
if(location != null){
console.log(location)
this.setData({
location: location
})
}
const userinfo = wx.getStorageSync('userinfo')
this.setData({
userinfo: userinfo
})
},
publish(){
this.setData({
loading_icon: 'loading',
loading_show: true,
loading_title: '请等待...'
})
var that = this
console.log("发布")
wx.request({
method: "POST",
url: domain + '/video/flow/user',
header: {
"alexmisko-user": wx.getStorageSync('token')
},
data: {
description: this.data.text,
mediaList: this.data.media,
longitude: this.data.location.longitude,
latitude: this.data.location.latitude,
location: this.data.location.name,
tagList: this.data.labelList
},
success(res){
console.log(res.data)
that.setData({
loading_icon: '',
loading_title: res.data.msg,
loading_show: true
})
if (res.data.code == "200"){
that.setData({
text: '',
media: [],
location: '',
labelList: []
})
}
}
})
},
textInput(e){
this.setData({
text: e.detail.value
})
}
})
5. 后端Redis上传的分片记录(需要后端代码的评论获取):