【uniapp实战笔记】使用app原生上传替代uniapp的uploadfile接口

// 发送文件方法
sendFile(e) {
//filePath是文件的本地路径，调用plus.io.convertAbsoluteFileSystem方法可以将平台绝对路径转换成本地URL路径
const filePath = plus.io.convertAbsoluteFileSystem(e.filePath)
// 这是后端服务器的文件上传地址
const url = this.$urlConfig.mattermost + '/plugins/plugin_ruixin_base/file/post'
// 这是创建上传任务时所需要到的配置参数
const uploadOptions = {
// 分块上传的大小单位kb，Android平台需设置分块上传才能准确触发statechanged返回上传进度，ios自动忽略
chunkSize: 100,
method: 'POST'
}
// 创建上传任务
this.uploadTask = plus.uploader.createUpload(url,uploadOptions)
// 往上传任务里添加文件，第二个参数的字段有默认值，可以传空对象{}即可，但是不能不传
this.uploadTask.addFile(filePath, {})
// 这里可以将添加文件的返回值打印出来，true表示添加文件成功，false表示添加失败
// console.log('添加文件', this.uploadTask.addFile(filePath, {}))
// 往接口里添加其他额外的请求参数,第一个参数是key，第二个参数是value
this.uploadTask.addData('string_key1', 'string_value1')
// 这里可以将添加额外请求参数的返回值打印出来，true表示添加成功，false表示添加失败
// console.log('添加额外请求参数', this.uploadTask.addData('string_key1', 'string_value1'))
this.uploadTask.addData('string_key2', 'string_value2')
// 设置请求头信息,根据后端接口的要求设置
this.uploadTask.setRequestHeader('headerName1', 'headerValue1')
this.uploadTask.setRequestHeader('headerName2', 'headerValue2')

// 注意：上面addFile、addData中但凡有一个返回false，都不能上传成功。请检查是否设置错了

// 添加事件监听器用于监听实时进度和完成情况，第一个参数为“statechanged”，第二个参数是回调方法
this.uploadTask.addEventListener( "statechanged", (upload, status) =>{
switch (upload.state) {
case 1: // 上传任务开始请求
break
case 2: // 上传任务请求已经建立
break
case 3: // 上传任务提交数据,监听 statechanged 事件时可多次触发此状态。（重点）
// uploadedSize表示当前已经上传了的数据大小，totalSize表示文件总大小，单位是字节b
console.log('上传进度',parseInt(100 * upload.uploadedSize/upload.totalSize) )
break
case 4: // 上传任务已完成, 无论成功或失败都会执行到 4 这里
if (status === 200) {
// 上传成功
} else {
// 上传失败
}
}
})
// 开始执行上传任务
this.uploadTask.start()
}