How to upload non-image and audio files in Uniapp

With the development of the mobile Internet, the development of mobile applications has become more and more important, and the emergence of universal frameworks has greatly simplified the development process. Uniapp, as a cross-platform development framework based on Vue.js, is also highly regarded. Developer favor. In Uniapp, we can upload pictures and voices very conveniently, but how to upload other types of files, such as text, video, etc.? This article will introduce in detail how to upload non-image and audio files in Uniapp.

1. Preparation

Before uploading, we need to do the following preparations:

1. Add permissions in manifest.json

We File reading permission needs to be added to the manifest.json file. The specific content is as follows:

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

2. Install Uniapp’s uni-request library

Uniapp provides a The network request packaging library is called uni-request. We need to install it first for later use. In HBuilderX, use the following command to install:

npm install --save uni-request

Here we choose the npm method to install. Of course, you can also download it locally and make it part of the static directory, so that it can be used offline. .

2. File upload process

1. Select file

First, we need to introduce a built-in chooseFile method, which can pop up the file selection box , allowing the user to select files to upload. Once selected, this method will call back a file path.

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

2. Get the file content

Next, we need to read the selected file for later upload. Here we use the post method of uni-request, pass the file path as a parameter, and then return the file for submission.

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);
                    }
                });
            }
        });
    }
});

What needs to be noted here is that we used the getFileSystemManager method to obtain the file system manager, and then used the readFile method under the manager to read the file. The last thing you get is a Buffer object. If we directly pass the Buffer object as a parameter, the server may require additional operations to obtain the file, so we need to convert it into a binary stream before uploading it.

3. Convert the Buffer object into a binary stream

In the previous step, we have read the file and obtained a Buffer object. However, we need to convert it to a binary stream before uploading it. Here, we can use an existing library, such as 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);
                        }
                    });
                });
            }
        });
    }
});

In this way, we successfully convert the Buffer object into a binary stream and upload it to the server. It should be noted that in the file-stream library, we use the createReadStream method to create a stream, and then use the on('data') method to Monitor the transmission process of the data fragment, and finally pass it to the data of uni.request to complete the upload.

3. Summary

Uploading non-picture and recording files in Uniapp requires multiple steps, including file selection, reading file content, converting to binary stream and uploading to the server. However, the APIs of Uniapp and uni-request are very easy to use, so the process becomes very simple and clear.

Of course, we can also use some other libraries to implement file upload, such as multer, etc. During use, we need to pay attention to the flow and processing of data to avoid unnecessary problems.

The above is the detailed content of How to upload non-image and audio files in Uniapp. For more information, please follow other related articles on the PHP Chinese website!