在uniapp中，上传file文件到服务器是一个常见需求，本文将详细介绍如何通过uniapp实现这一功能，包括前端的文件选择、文件上传以及后端的接收与处理，以下是具体步骤和代码示例：
一、HTML部分
我们需要一个按钮来触发文件选择器，并展示已选择的文件列表，以下是一个简单的HTML模板：
<view class="container">
<button @click="openFile">选择文件</button>
<scrollview scrolly>
<view vfor="(file, index) in currentFile" :key="index" class="fileitem">
<text>{{ file.name }}</text>
<image src="../../static/image/file_del.png" @click="removeFile(index)"></image>
</view>
</scrollview>
</view>
在这个模板中，我们使用了一个按钮来触发文件选择器，并使用scrollview组件来展示已选择的文件列表，每个文件项包含文件名和一个删除按钮。
二、JavaScript部分
我们在Vue组件中编写逻辑代码来实现文件选择和上传功能。
export default {
data() {
return {
currentFile: [] // 存储已选择的文件列表
};
},
methods: {
openFile() {
uni.chooseFile({
count: 1, // 默认9
extension: ['.zip', '.doc', '.xls', '.pdf', 'docx', '.rar', '.7z', '.jpg', '.png', '.jpeg'],
success: (res) => {
console.log(res);
if (res.tempFiles[0].size / 1024 / 1024 > 20) {
this.$refs.uToast.show({
title: '附件大小不能超过20M',
type: 'warning',
});
return;
}
this.resultPath(res.tempFilePaths[0], res.tempFiles[0].name);
}
});
},
resultPath(path, fileName) {
console.log(path);
console.log(fileName);
uni.showLoading({
title: '上传中...',
});
uni.uploadFile({
url: base.baseUrl + '/upload', // 替换为你的服务器接口地址
filePath: path,
header: {
'Authorization': 'Bearer yourtoken' // 如果需要身份验证，请添加相应的token
},
formData: {
// 你可以根据需要添加其他表单数据
},
success: (uploadFileRes) => {
const obj = JSON.parse(uploadFileRes.data);
if (obj.code === 0) {
this.getOssUrl(obj.tmpFileIds[obj.id], fileType, fileName);
} else {
uni.showToast({
title: uploadFileRes.data.returnMessage,
icon: 'none',
duration: 1500,
});
}
},
fail: (err) => {
this.$refs.uToast.show({
title: '上传失败',
type: 'error',
});
uni.hideLoading();
}
});
},
getOssUrl(tmpFileId, fileType, fileName) {
// 根据服务器返回的tmpFileId获取OSS URL的逻辑（如果需要）
},
removeFile(index) {
this.currentFile.splice(index, 1); // 从已选择的文件列表中移除指定文件
}
}
};
在这个示例中，我们使用了uni.chooseFile方法来打开文件选择器，并限制了可选择的文件类型和数量，成功选择文件后，我们调用resultPath方法来处理文件路径和名称，并调用uni.uploadFile方法将文件上传到服务器，上传成功后，我们可以根据服务器返回的数据进行相应处理。
三、后端部分
后端需要提供一个接收文件上传的接口，以下是一个使用Node.js和Express框架的简单示例：
const express = require('express');
const multer = require('multer');
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).send('No file uploaded.');
}
// 你可以在这里对文件进行处理，比如保存到数据库或云存储等
res.send({ code: 0, tmpFileId: file.filename }); // 返回临时文件ID或其他标识符给前端
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
在这个示例中，我们使用了multer中间件来处理文件上传，当文件上传成功后，我们可以在请求体中获取到文件信息，并进行相应处理，我们将临时文件ID或其他标识符返回给前端。
通过以上步骤，我们可以在uniapp中实现文件选择和上传功能，并将文件上传到服务器，需要注意的是，实际项目中可能需要根据具体需求进行调整和优化，你可能需要添加更多的错误处理逻辑、支持多文件上传、处理大文件上传等，后端也需要根据实际业务需求进行相应的开发和配置。
小伙伴们，上文介绍了“uniapp怎么上传file文件到服务器”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
