How to implement local upload audio function in uniapp

In recent years, with the development and popularization of mobile Internet, various applications have sprung up, and among them, audio applications have shown an explosive growth trend. Handheld KTV applications such as Changba and Maisong have become an important choice for young people in leisure and entertainment. However, most audio functions in applications require uploading audio files to the server to achieve functions such as sharing and on-demand playback. In this context, this article will introduce how to implement the local upload audio function in uniapp.

uniapp is a cross-platform development framework that supports compiling programs into applications for different platforms at one time, such as iOS, Android, H5, etc. Therefore, this article will introduce how to upload audio locally based on uniapp.

First of all, we need to install a third-party plug-in --uni-upload-file in uniapp. This plug-in is a component that directly uploads files from the front end to the server, which can achieve relatively fast and convenient file upload. To use this plug-in, you need to install the plug-in through the npm command in the root directory of the uniapp project. The execution code is as follows:

npm install --save uni-upload-file

Next, introduce the plug-in into the project and use it as follows:

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

Then, in the page where audio needs to be uploaded, the file upload function can be implemented through the event binding mechanism provided by uniapp. The code example is as follows:

<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>

In the above code, we use uni -upload-file component to complete file upload, where the @complete event is the callback function after the file upload is completed, and we can obtain the upload result in this function.

In addition, we need to note that when using this plug-in, you usually need to specify the file upload address, that is, the source attribute, which should point to a file upload interface. Therefore, we need to create a file upload interface on the server side.

For server-side code, you can use any back-end language to implement it. You only need to implement the file upload function in the interface. In my case, I use Node.js and express framework to implement file upload. The implementation code is as follows:

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'))

In the above code, we use the multer plug-in to implement the file upload function, and the interface address is /upload, the uploaded file field name is audio, and the file name will be responded to the client after the upload is completed.

Finally, we need to fill in the file upload address into the source attribute on the front end to realize the function of uploading audio locally.

Summary

This article details how to implement the function of uploading audio locally in uniapp. By introducing the uni-upload-file plug-in, binding the @complete event, and then using the file upload interface provided by the backend, the file upload function is completely realized. I hope this article can help developers who need to upload audio files.

The above is the detailed content of How to implement local upload audio function in uniapp. For more information, please follow other related articles on the PHP Chinese website!