uniapp 实现app端createUpload上传文件

1,213 阅读1分钟

以下就是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 = ""
},