以下就是uniapp调用plus的# uploader模块进行上传, 于从本地上传各种文件到服务器,并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上传使用HTTP的POST方式提交数据,数据格式符合Multipart/form-data规范
//获取视频,获取到视频路径后调用appUploadFile函数进行上传
uploadVideo() {
// 重新上传需要取消上传的任务
if (this.uploadTask) {
this.uploadTask.abort()
}
uni.chooseVideo({
sourceType: ['album', 'camera'],
success: (res) => {
this.uploadStatus = "upload"
console.log("上传视频", res);
let {
tempFilePath,
duration
} = res
if (duration < 5) {
this.$u.toast("视频时长需在5秒以上")
return
}
// #ifdef APP-PLUS
this.appUploadFile(tempFilePath)
// #endif
}
})
},
//创建上传任务
appUploadFile(tempFilePath) {
// 新建上传任务
const task = plus.uploader.createUpload(api.uploadUrl, {
// 上传类型
method: "post",
// 分块上传的大小
chunkSize: 100
}, res => {
console.log("上传成功", res);
});
// 将获取的文件类型转化为本地url地址
const filePath = plus.io.convertAbsoluteFileSystem(tempFilePath)
// 添加文件,如果写错会有Required request part 'file' is not present错误
task.addFile(tempFilePath, {
key: "file"
})
// 添加请求体,也就是后端需要你上次的参数
task.addData("file", tempFilePath)
const dir = tempFilePath.split("/")
task.addData("dir", dir[dir.length - 1])
task.addData("fileType", "video")
// 添加请求头
task.setRequestHeader("client-type", "APP");
task.setRequestHeader("tenant-id", __config.tenantId);
task.setRequestHeader("enterprise-id", this.firm_Info?.id ?? '');
task.setRequestHeader("third-session", this.third_session ?? "");
// 监听上传文件任务进程状态
task.addEventListener("statechanged", (res, status) => {
console.log("上传文件", res, status);
let {
responseText,
state,
uploadedSize,
totalSize
} = res
// console.log("上传结果", responseText, state);
switch (state) {
case undefined:
// 上传任务未开始
break;
case 0:
// 上传任务开始调度
break;
case 1:
// 上传任务开始请求
break;
case 2:
// 上传任务请求已经建立
break;
case 3:
/ 上传任务提交数据,监听statechanged事件时可多次触发此状态。
this.progress = parseInt(100 * uploadedSize / totalSize)
onsole.log('监听上传进度', this.progress)
break;
case 4:
// 上传任务已完成
if (status === 200) {
// 上传成功
// console.log("上传成功", JSON.parse(responseText));
let response = JSON.parse(responseText)
this.videoUrl = response.link
this.uploadStatus = "success"
uni.showToast({
title: "上传成功",
icon: "success"
})
} else {
// 上传失败
this.uploadStatus = "fail"
uni.showToast({
title: "上传失败",
icon: "error"
})
}
break;
case 4:
// console.log("上传任务已完成")
break;
case 5:
// console.log("上传任务已暂停")
break;
default:
break;
}
}, false);
// 开始上传
task.start()
this.uploadTask = task
},
//暂停/恢复上传
pauseUpload() {
// 暂停
if (this.isPause === false) {
this.uploadTask.pause()
} else {
// 恢复上传
this.uploadTask.resume()
}
this.isPause = !this.isPause
},
// 取消上传
cancelUpload() {
if (this.uploadTask) {
this.uploadTask.abort()
}
this.uploadStatus = ""
},