如何使用app原生上传替代uniapp的uploadfile接口

uniapp简介

uniapp是近两年来比较火的号称开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序的一个平台，它提供了各种丰富的API文档让开发者快速的完成各种功能。

但是由于uniapp是一个新兴平台，生态还不够完整，难免会出现一些bug。今天我们就来讲讲uniapp官方上传文件API的坑以及如何使用原生app写法代替uniapp的上传接口。

uniapp官方上传文件接口uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。

接口参数：

如果你只需要上传文件而不需要监控实时上传进度，则使用uni.uploadFile接口即可。

 

为何需要使用app原生上传代替 uniapp官网的uploadFile接口

原因有两点：

1、如果希望监控上传进度，则需要返回一个 uploadTask 对象，用这个对象的 onProgressUpdate方法进行监听上传进度，使用abort方法取消上传任务。而这个uploadTask对象如果定义为页面全局对象则onProgressUpdate方法和abort方法有时候会不执行，导致无法监听上传进度和取消任务。

2、onProgressUpdate监听的上传进度与实际进度不相符。仅表现在安卓端，IOS端无这种情况。具体原因是我上传一个30多M的文件，刚开始进度是0，突然一下子嗖的就变成了100，导致页面的进度条也是一下子从0变到100，然后就在100 这里卡住。其实是远没有上传完的。等了好几秒才显示完成。

 

如何使用app原生上传文件

对原生接口文档感兴趣的小伙伴可以从这里进去。下面我直接贴上我的代码并通过注释进行代码讲解。

// 发送文件方法
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()
}

运行代码之后打印出比较精确的实时上传进度

 

总结

uniapp上传文件的接口uploadfile主要的坑在于如果你想监控实时上传进度，在安卓端它无法提供一个实时准确的上传进度。如果不需要监控实时上传进度，使用uploadfile接口还是很不错的，使用简单便捷。原生上传文件接口虽然比较复杂，但是好在安卓和苹果都能支持，保证了兼容性。