Cara memuat naik fail bukan gambar dan audio dalam Uniapp

Dengan pembangunan Internet mudah alih, pembangunan aplikasi mudah alih menjadi semakin penting, dan kemunculan rangka kerja universal telah memudahkan proses pembangunan Uniapp, sebagai rangka kerja pembangunan merentas platform berdasarkan Vue.js, juga sangat dihormati oleh pemaju. Dalam Uniapp, kami boleh memuat naik gambar dan suara dengan sangat mudah, tetapi bagaimana untuk memuat naik jenis fail lain, seperti teks, video, dsb.? Artikel ini akan memperkenalkan secara terperinci cara memuat naik fail bukan imej dan audio dalam Uniapp.

1. Persediaan

Sebelum memuat naik, kami perlu melakukan persediaan berikut:

1. Tambah kebenaran dalam manifes.json

Kami kebenaran membaca fail perlu ditambahkan pada fail manifest.json Kandungan khusus adalah seperti berikut:

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

2 Pasang pustaka uni-permintaan Uniapp

Uniapp menyediakan pustaka pengkapsulan permintaan rangkaian. uni-request, kita perlu memasangnya dahulu untuk kegunaan kemudian. Dalam HBuilderX, gunakan arahan berikut untuk memasang:

npm install --save uni-request

Di sini kami memilih kaedah npm untuk dipasang Sudah tentu, anda juga boleh memuat turunnya secara setempat dan menggunakannya sebagai sebahagian daripada direktori statik, supaya ia boleh dipasang di luar talian Gunakan di bawah.

2. Proses muat naik fail

1 Pilih fail

Pertama, kami perlu memperkenalkan kaedah chooseFile terbina dalam, yang boleh muncul dalam kotak pemilihan fail dan biarkan pengguna memilih Fail untuk dimuat naik. Setelah dipilih, kaedah ini akan memanggil semula laluan fail.

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

2. Dapatkan kandungan fail

Seterusnya, kita perlu membaca fail yang dipilih untuk dimuat naik kemudian. Di sini kami menggunakan kaedah siaran uni-request, lulus laluan fail sebagai parameter, dan kemudian mengembalikan fail untuk penyerahan.

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

Apa yang perlu diperhatikan di sini ialah kami menggunakan kaedah getFileSystemManager untuk mendapatkan pengurus sistem fail, dan kemudian menggunakan kaedah readFile di bawah pengurus untuk membaca fail tersebut mendapat objek Penampan. Dan jika kami terus menghantar objek Penampan sebagai parameter, pelayan mungkin memerlukan operasi tambahan untuk mendapatkan fail, jadi kami perlu menukarnya kepada aliran binari sebelum memuat naiknya.

3. Tukar objek Penampan kepada aliran binari

Dalam langkah sebelumnya, kami telah membaca fail dan memperoleh objek Penampan. Walau bagaimanapun, kita perlu menukarnya kepada aliran binari sebelum memuat naiknya. Di sini, kita boleh menggunakan pustaka sedia ada, seperti 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);
                        }
                    });
                });
            }
        });
    }
});

Dengan cara ini, kami berjaya menukar objek Penampan kepada aliran binari dan memuat naiknya ke pelayan. Perlu diingatkan bahawa dalam pustaka file-stream, kami menggunakan kaedah createReadStream untuk mencipta aliran, dan kemudian menggunakan kaedah on('data') untuk memantau proses penghantaran serpihan data, dan akhirnya menghantarnya kepada data uni.request untuk melengkapkan muat naik .

3. Ringkasan

Memuat naik fail bukan imej dan audio dalam Uniapp memerlukan beberapa langkah, termasuk pemilihan fail, membaca kandungan fail, menukar kepada strim binari dan memuat naik ke pelayan. Walau bagaimanapun, API Uniapp dan uni-request sangat mudah digunakan, jadi prosesnya menjadi sangat mudah dan jelas.

Sudah tentu, kami juga boleh menggunakan beberapa perpustakaan lain untuk melaksanakan muat naik fail, seperti multer dsb. Semasa penggunaan, kita perlu memberi perhatian kepada aliran dan pemprosesan data untuk mengelakkan masalah yang tidak perlu.

Atas ialah kandungan terperinci Cara memuat naik fail bukan gambar dan audio dalam Uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!