1 回复
在uni-app中上传音频文件或其他类型文件时遇到类型错误,通常是由于文件类型验证或后端接口对文件类型的限制所导致。为了确保上传的文件类型正确,可以在前端进行文件类型校验,并在后端进行进一步验证。以下是一个简单的示例,展示如何在uni-app中实现音频文件的上传,并对文件类型进行校验。
前端代码(uni-app)
- 页面布局(.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)
- 安装必要的包
npm install multer
- 设置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和参数名称匹配,并根据实际需求调整代码。