Bagaimana untuk melaksanakan fungsi audio muat naik setempat dalam uniapp

Dalam beberapa tahun kebelakangan ini, dengan pembangunan dan pempopularan Internet mudah alih, pelbagai aplikasi telah muncul, dan antaranya, aplikasi audio telah menunjukkan trend pertumbuhan yang pesat. Aplikasi KTV pegang tangan seperti Changba dan Maisong telah menjadi pilihan penting untuk golongan muda dalam masa lapang dan hiburan. Walau bagaimanapun, kebanyakan fungsi audio dalam aplikasi memerlukan memuat naik fail audio ke pelayan untuk mencapai fungsi seperti perkongsian dan main balik atas permintaan. Dalam konteks ini, artikel ini akan memperkenalkan cara melaksanakan fungsi audio muat naik setempat dalam uniapp.

uniapp ialah rangka kerja pembangunan merentas platform yang menyokong penyusunan program ke dalam aplikasi untuk platform berbeza pada satu masa, seperti iOS, Android, H5, dsb. Oleh itu, artikel ini akan memperkenalkan cara memuat naik audio secara setempat berdasarkan uniapp.

Pertama sekali, kami perlu memasang pemalam pihak ketiga --uni-upload-file dalam uniapp ini ialah komponen yang memuat naik terus fail ke pelayan dari bahagian hadapan. yang boleh mencapai muat naik fail yang agak pantas dan mudah. Untuk menggunakan pemalam ini, anda perlu memasang pemalam melalui arahan npm dalam direktori akar projek uniapp Kod pelaksanaan adalah seperti berikut:

npm install --save uni-upload-file

Seterusnya, perkenalkan pemalam-. masuk ke dalam projek dan gunakannya seperti berikut:

import uniUploadFile from '@/components/uni-upload-file/uni-upload-file.vue'

Kemudian, dalam halaman di mana audio perlu dimuat naik, fungsi muat naik fail boleh dilaksanakan melalui mekanisme pengikatan acara yang disediakan oleh uniapp Contoh kod adalah seperti berikut:

<template>
  <view>
    <input type="file" @change="onFileChange">
    <uni-upload-file :source="source" @complete="onUploadComplete"></uni-upload-file>
  </view>
</template>

<script>
import uniUploadFile from '@/components/uni-upload-file/uni-upload-file.vue'

export default {
  components: {
    uniUploadFile
  },
  data () {
    return {
      source: '' // 文件上传地址
    }
  },
  methods: {
    onFileChange (event) {
      // 选择要上传的音频文件
      let file = event.target.files[0]
      this.$refs.upload.upload(file)
    },
    onUploadComplete (data) {
      // 文件上传完成后的回调
      console.log('upload complete', data)
    }
  }
}
</script>

Dalam kod di atas , kami menggunakan komponen uni-upload-file untuk melengkapkan muat naik fail, dengan acara @complete ialah fungsi panggil balik selepas muat naik fail selesai, dan kita boleh mendapatkan hasil muat naik dalam fungsi ini.

Selain itu, kami perlu ambil perhatian bahawa apabila menggunakan pemalam ini, anda biasanya perlu menentukan alamat muat naik fail, iaitu atribut source, yang sepatutnya menghala ke antara muka muat naik fail. Oleh itu, kita perlu mencipta antara muka muat naik fail pada bahagian pelayan.

Untuk kod bahagian pelayan, anda boleh menggunakan mana-mana bahasa bahagian belakang untuk melaksanakannya Anda hanya perlu melaksanakan fungsi muat naik fail dalam antara muka. Dalam kes saya, saya menggunakan rangka kerja Node.js dan ekspres untuk melaksanakan muat naik fail Kod pelaksanaan adalah seperti berikut:

const express = require('express')
const multer = require('multer')
const app = express()

// 设置上传路径
const uploadsDir = './uploads' // 上传目录
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, uploadsDir)
  },
  filename: (req, file, cb) => {
    let ext = file.originalname.split('.').pop()
    let filename = `${file.fieldname}-${Date.now()}.${ext}`
    cb(null, filename)
  }
})
const upload = multer({ storage: storage })

// 上传接口
app.post('/upload', upload.single('audio'), (req, res) => {
  console.log(req.file)
  res.send({ code: 0, msg: '上传成功', data: req.file.filename })
})

// 启动服务
app.listen(3000, () => console.log('server started'))

Dalam kod di atas, kami menggunakan pemalam multer untuk melaksanakan muat naik fail. Fungsi. Alamat antara muka ialah /upload, nama medan fail yang dimuat naik ialah audio, dan nama fail akan dijawab kepada klien selepas muat naik selesai.

Akhir sekali, kita perlu mengisi alamat muat naik fail ke dalam atribut source di bahagian hadapan untuk merealisasikan fungsi memuat naik audio secara setempat.

Ringkasan

Artikel ini memperincikan cara melaksanakan fungsi memuat naik audio secara setempat dalam uniapp. Dengan memperkenalkan pemalam fail-uni-muat naik, mengikat acara @complete dan kemudian menggunakan antara muka muat naik fail yang disediakan oleh bahagian belakang, fungsi muat naik fail direalisasikan sepenuhnya. Saya harap artikel ini dapat membantu pembangun yang perlu memuat naik fail audio.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi audio muat naik setempat dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!