So laden Sie Nicht-Bild- und Audiodateien in Uniapp hoch

Mit der Entwicklung des mobilen Internets ist die Entwicklung mobiler Anwendungen immer wichtiger geworden, und das Aufkommen universeller Frameworks hat auch den Entwicklungsprozess als plattformübergreifendes Entwicklungsframework auf Basis von Vue.js erheblich vereinfacht beliebt bei Entwicklern. In Uniapp können wir ganz bequem Bilder und Stimmen hochladen, aber wie lädt man andere Dateitypen wie Text, Videos usw. hoch? In diesem Artikel wird ausführlich beschrieben, wie Sie Nicht-Bild- und Audiodateien in Uniapp hochladen.

1. Vorbereitung

Vor dem Hochladen müssen wir die folgenden Vorbereitungen treffen:

1. Berechtigungen zu manifest.json hinzufügen

Wir müssen Dateien zur Datei manifest.json hinzufügen Der spezifische Inhalt lautet wie folgt: 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. Installieren Sie die Uni-Request-Bibliothek. 🎜🎜Uniapp stellt eine Netzwerk-Request-Paketbibliothek mit dem Namen uni-request bereit. Wir müssen sie zuerst für die spätere Verwendung installieren. Verwenden Sie in HBuilderX den folgenden Befehl zur Installation: 🎜rrreee🎜Hier wählen wir die npm-Methode zur Installation aus. Natürlich können Sie es auch lokal herunterladen und in das statische Verzeichnis aufnehmen, damit es offline verwendet werden kann. 🎜🎜2. Datei-Upload-Prozess🎜🎜1. Datei auswählen🎜🎜Zuerst müssen wir eine integrierte chooseFile-Methode einführen, die ein Dateiauswahlfeld öffnen und dem Benutzer die Auswahl der Datei ermöglichen kann hochladen. Nach der Auswahl ruft diese Methode einen Dateipfad zurück. 🎜rrreee🎜2. Holen Sie sich den Dateiinhalt🎜🎜Als nächstes müssen wir die ausgewählte Datei lesen, um sie später hochzuladen. Hier verwenden wir die Post-Methode von Uni-Request, übergeben den Dateipfad als Parameter und geben die Datei dann zur Übermittlung zurück. 🎜rrreee🎜Was hier beachtet werden muss, ist, dass wir die Methode getFileSystemManager verwenden, um den Dateisystemmanager abzurufen, und dann die Methode readFile unter dem Manager verwenden, um die Datei zu lesen. und schließlich bekommen Was ankommt, ist ein Pufferobjekt. Wenn wir das Buffer-Objekt direkt als Parameter übergeben, benötigt der Server möglicherweise zusätzliche Vorgänge, um die Datei abzurufen. Daher müssen wir sie vor dem Hochladen in einen Binärstream konvertieren. 🎜🎜3. Konvertieren Sie das Buffer-Objekt in einen Binärstream🎜🎜Im vorherigen Schritt haben wir die Datei gelesen und ein Buffer-Objekt erhalten. Allerdings müssen wir es vor dem Hochladen in einen Binärstream konvertieren. Hier können wir eine vorhandene Bibliothek wie file-stream verwenden: 🎜rrreee🎜Auf diese Weise konvertieren wir das Buffer-Objekt erfolgreich in einen Binärstream und laden ihn auf den Server hoch. Es ist zu beachten, dass wir in der file-stream-Bibliothek die Methode createReadStream verwenden, um einen Stream zu erstellen, und dann on('data') verwenden. code >Methode zum Überwachen des Übertragungsprozesses von Datenfragmenten und zum abschließenden Übergeben an die Daten von <code>uni.request, um den Upload abzuschließen. 🎜🎜3. Zusammenfassung🎜🎜 Das Hochladen von Nicht-Bild- und Audiodateien in Uniapp erfordert mehrere Schritte, einschließlich Dateiauswahl, Lesen des Dateiinhalts, Konvertieren in einen Binärstream und Hochladen auf den Server. Allerdings sind die APIs von Uniapp und Uni-Request sehr einfach zu verwenden, sodass der Prozess sehr einfach und klar wird. 🎜🎜Natürlich können wir auch einige andere Bibliotheken verwenden, um das Hochladen von Dateien zu implementieren, z. B. multer usw. Bei der Nutzung müssen wir auf den Datenfluss und die Datenverarbeitung achten, um unnötige Probleme zu vermeiden. 🎜

Das obige ist der detaillierte Inhalt vonSo laden Sie Nicht-Bild- und Audiodateien in Uniapp hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!