Comment télécharger des fichiers non image et audio dans Uniapp

Avec le développement de l'Internet mobile, le développement d'applications mobiles est devenu de plus en plus important, et l'émergence de frameworks universels a considérablement simplifié le processus de développement. Uniapp, en tant que framework de développement multiplateforme basé sur Vue.js, l'est également. populaire parmi les développeurs. Dans Uniapp, nous pouvons télécharger des images et des voix de manière très pratique, mais comment télécharger d'autres types de fichiers, tels que du texte, des vidéos, etc. ? Cet article présentera en détail comment télécharger des fichiers non image et audio dans Uniapp.

1. Préparation

Avant le téléchargement, nous devons effectuer les préparations suivantes :

1. Ajouter des autorisations à manifest.json

Nous devons ajouter des fichiers au fichier manifest.json. , le contenu spécifique est le suivant : 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方法，将文件路径作为参数传递过去，然后再把文件返回进行提交。

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都非常好用，因此这个过程就变得十分简单和清晰了。

当然，我们还可以使用其他一些库来实现文件上传，如multerrrreee

2. Installez la bibliothèque uni-request d'Uniapp 🎜🎜Uniapp fournit une bibliothèque d'empaquetage de requêtes réseau nommée uni-request. Nous devons d'abord l'installer pour une utilisation ultérieure. Dans HBuilderX, utilisez la commande suivante pour installer : 🎜rrreee🎜Ici, nous choisissons la méthode npm pour l'installer. Bien sûr, vous pouvez également la télécharger localement et l'intégrer au répertoire statique, afin qu'elle puisse être utilisée hors ligne. 🎜🎜2. Processus de téléchargement de fichiers🎜🎜1. Sélectionner un fichier🎜🎜Tout d'abord, nous devons introduire une méthode chooseFile intégrée, qui peut faire apparaître une boîte de sélection de fichier et permettre à l'utilisateur de sélectionner le fichier. à télécharger. Une fois sélectionnée, cette méthode rappellera un chemin de fichier. 🎜rrreee🎜2. Obtenez le contenu du fichier🎜🎜Ensuite, nous devons lire le fichier sélectionné pour le télécharger plus tard. Ici, nous utilisons la méthode post d'uni-request, passons le chemin du fichier en tant que paramètre, puis renvoyons le fichier pour soumission. 🎜rrreee🎜Ce qu'il faut noter ici, c'est que nous utilisons la méthode getFileSystemManager pour obtenir le gestionnaire du système de fichiers, puis utilisons la méthode readFile sous le gestionnaire pour lire le fichier, et enfin obtenir Ce qui arrive est un objet Buffer. Et si nous passons directement l'objet Buffer en paramètre, le serveur peut nécessiter des opérations supplémentaires pour obtenir le fichier, nous devons donc le convertir en flux binaire avant de le télécharger. 🎜🎜3. Convertir l'objet Buffer en flux binaire🎜🎜Dans l'étape précédente, nous avons lu le fichier et obtenu un objet Buffer. Cependant, nous devons le convertir en flux binaire avant de le télécharger. Ici, nous pouvons utiliser une bibliothèque existante, telle que file-stream : 🎜rrreee🎜De cette façon, nous réussissons à convertir l'objet Buffer en un flux binaire et à le télécharger sur le serveur. Il est à noter que dans la bibliothèque file-stream, nous utilisons la méthode createReadStream pour créer un flux, puis utilisons on('data') code >Méthode pour surveiller le processus de transmission des fragments de données, et enfin le transmettre aux données de <code>uni.request pour terminer le téléchargement. 🎜🎜3. Résumé🎜🎜Le téléchargement de fichiers non image et audio dans Uniapp nécessite plusieurs étapes, notamment la sélection du fichier, la lecture du contenu du fichier, la conversion en flux binaire et le téléchargement sur le serveur. Cependant, les API d'Uniapp et d'uni-request sont très faciles à utiliser, le processus devient donc très simple et clair. 🎜🎜Bien sûr, nous pouvons également utiliser d'autres bibliothèques pour implémenter le téléchargement de fichiers, telles que multer, etc. Lors de l'utilisation, nous devons prêter attention au flux et au traitement des données pour éviter des problèmes inutiles. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!