uni-app上传音频文件等文件时遇到类型错误

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app上传音频文件等文件时遇到类型错误

1 回复

在uni-app中上传音频文件或其他类型文件时遇到类型错误,通常是由于文件类型验证或后端接口对文件类型的限制所导致。为了确保上传的文件类型正确,可以在前端进行文件类型校验,并在后端进行进一步验证。以下是一个简单的示例,展示如何在uni-app中实现音频文件的上传,并对文件类型进行校验。

前端代码(uni-app)

  1. 页面布局(.vue文件)
<template>
  <view>
    <button @click="chooseFile">选择音频文件</button>
    <button @click="uploadFile" :disabled="!file">上传文件</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    chooseFile() {
      uni.chooseMessageFile({
        count: 1,
        type: 'audio',
        extension: ['mp3', 'wav'],
        success: (res) => {
          this.file = res.tempFiles[0];
        },
        fail: (err) => {
          console.error('选择文件失败', err);
        }
      });
    },
    uploadFile() {
      if (!this.file) return;
      
      const formData = new FormData();
      formData.append('file', this.file.path, this.file.name);

      uni.uploadFile({
        url: 'https://your-backend-url.com/upload', // 替换为你的后端接口
        filePath: this.file.path,
        name: 'file',
        formData: formData,
        success: (uploadFileRes) => {
          console.log('上传成功', uploadFileRes);
        },
        fail: (err) => {
          console.error('上传失败', err);
        }
      });
    }
  }
};
</script>

后端代码(示例,假设使用Node.js和Express)

  1. 安装必要的包
npm install multer
  1. 设置Express服务器
const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).json({ error: 'No file uploaded' });
  }

  // 进一步校验文件类型
  const validTypes = ['audio/mpeg', 'audio/wav'];
  if (!validTypes.includes(file.mimetype)) {
    return res.status(400).json({ error: 'Invalid file type' });
  }

  res.json({ message: 'File uploaded successfully', file: file.filename });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

以上代码展示了如何在uni-app中选择和上传音频文件,并在后端进行文件类型验证。确保前后端接口URL和参数名称匹配,并根据实际需求调整代码。

回到顶部