Uniapp中如何上传非图片和录音文件-uni-app-PHP中文网

Uniapp中如何上传非图片和录音文件

PHPz

发布： 2023-04-17 10:30:12

原创

3348人浏览过

随着移动互联网的发展，移动应用程序的开发变得越来越重要，而通用框架的出现大大简化了开发的流程，uniapp作为一个基于vue.js的跨平台开发框架，也备受开发者的青睐。在uniapp中，我们可以非常方便地上传图片和语音，但是对于其他类型的文件，如文本、视频等，又该如何上传呢？本文将会详细地介绍在uniapp中如何上传非图片和录音文件。

一、前置准备

在上传之前，我们需要做以下准备工作：

1. 在manifest.json中添加权限

我们需要在manifest.json文件中添加文件读取的权限，具体内容如下：

{
    "mp-weixin": {
        "permission": {
            "scope.userLocation": {
                "desc": "读取文件时需要获取您的授权"
            }
        }
    }
}

登录后复制

2. 安装Uniapp的uni-request库

Uniapp提供了一个网络请求封装库，名为uni-request，我们需要先安装它，以便后面使用。在HBuilderX中，使用以下命令安装：

npm install --save uni-request

登录后复制

这里我们选择npm方式进行安装，当然您也可以将其下载到本地，并将其作为static目录的一部分，这样可以在离线情况下使用。

二、文件上传流程

1. 选择文件

首先，我们需要引入一个内置的chooseFile方法，它可以弹出文件选择框，让用户选择要上传的文件。选择后，该方法会回调一个文件路径。

uni.chooseFile({
    count: 1, // 最多选择1个文件
    type: 'file', // 只允许选择文件
    success: function (res) {
        console.log(res.tempFiles[0].path);
        // 此处拿到文件路径传到下一步中
    }
});

登录后复制

2. 获取文件内容

接下来，我们需要将选择的文件读取出来，以便后面上传。这里我们使用uni-request的post方法，将文件路径作为参数传递过去，然后再把文件返回进行提交。

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

查看详情

uni.chooseFile({
    count: 1,
    type: 'file',
    success: function (res) {
        uni.getFileSystemManager().readFile({
            filePath: res.tempFiles[0].path,
            success: function (data) {
                uni.request({
                    url: 'http://yourpath/to/upload',
                    data: data.data,
                    method: 'post',
                    success: function (uploadRes) {
                        console.log(uploadRes);
                    }
                });
            }
        });
    }
});

登录后复制

这里需要注意的是，我们使用了getFileSystemManager方法获取到了文件系统管理器，然后使用该管理器下面的readFile方法读取文件，最后拿到的是一个Buffer对象。而如果我们直接把Buffer对象作为参数传递过去，服务端可能需要额外的操作才能获取到文件，所以我们需要将其转化为二进制流后再上传。

3. 将Buffer对象转化为二进制流

在上一步中，我们已经把文件读取出来并且得到了一个Buffer对象。但是，我们需要将其转化为二进制流，然后再进行上传。这里，我们可以使用一个现有的库，如file-stream：

uni.chooseFile({
    count: 1,
    type: 'file',
    success: function (res) {
        uni.getFileSystemManager().readFile({
            filePath: res.tempFiles[0].path,
            success: function (data) {
                const stream = require('file-stream').createReadStream(data.data);
                stream.on('data', function (chunk) {
                    uni.request({
                        url: 'http://yourpath/to/upload',
                        data: chunk,
                        method: 'post',
                        success: function (uploadRes) {
                            console.log(uploadRes);
                        }
                    });
                });
            }
        });
    }
});

登录后复制

这样，我们就成功把Buffer对象转化为二进制流，并上传到服务器上了。需要注意的是，在file-stream库中，我们使用了createReadStream方法创建了一个流，然后使用on('data')方法来监听数据片段的传输过程，最后传递到uni.request的data中，完成上传。

三、总结

在Uniapp中上传非图片和录音文件需要经过多个步骤，包括文件选择、读取文件内容、转化为二进制流和上传服务器等。但是，Uniapp和uni-request的API都非常好用，因此这个过程就变得十分简单和清晰了。

当然，我们还可以使用其他一些库来实现文件上传，如multer等。在使用过程中，我们需要注意数据的流向和处理方式，以免发生一些不必要的问题。

以上就是Uniapp中如何上传非图片和录音文件的详细内容，更多请关注php中文网其它相关文章！