技术文摘
Uniapp 实现上传图片时名字维持不变
2025-01-10 19:36:54 小编
在 Uniapp 开发项目中,实现上传图片时名字维持不变是一个常见需求。这不仅方便用户管理图片,也有助于在后续的业务逻辑中更准确地识别和使用图片资源。
了解 Uniapp 中图片上传的基本原理。Uniapp 提供了丰富的 API 来处理文件上传操作,常用的是 uni.uploadFile 方法。该方法允许我们选择本地图片,并将其上传到指定的服务器地址。但默认情况下,服务器可能会为上传的图片重新命名,这就不符合我们维持原名的要求。
要解决这个问题,关键在于服务器端的处理。当客户端使用 uni.uploadFile 上传图片时,我们需要在请求中携带图片的原始名称。例如:
uni.chooseImage({
count: 1,
success: function (res) {
const filePath = res.tempFilePaths[0];
const originalName = filePath.split('/').pop();
uni.uploadFile({
url: 'https://example.com/upload',
filePath: filePath,
name: 'file',
formData: {
originalName: originalName
},
success: function (uploadRes) {
console.log(uploadRes.data);
}
});
}
});
在上述代码中,我们通过 filePath.split('/').pop() 获取图片的原始名称,并将其作为参数 originalName 发送到服务器。
服务器端接收到请求后,需要根据接收到的 originalName 来保存图片。以 Node.js 为例,使用 Express 框架和 fs 模块可以这样处理:
const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');
app.post('/upload', (req, res) => {
const originalName = req.body.originalName;
const file = req.files.file;
const uploadPath = path.join(__dirname, 'uploads', originalName);
file.mv(uploadPath, function (err) {
if (err) {
return res.status(500).send(err);
}
res.send('File uploaded successfully');
});
});
const port = 3000;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
通过上述步骤,在 Uniapp 中上传图片时就能维持其原始名字。这样无论是在本地开发还是实际项目部署中,都能确保图片名称的一致性,为项目开发和维护带来极大便利,同时也提升了用户体验。
- 安装docsify-cli脚手架遇到npm ERR! code ETIMEDOUT错误如何解决
- iOS前端开发解决文本省略溢出问题的方法
- Vue3实现图片自动切换效果及处理如fortnite.gg商店页面商品图片数量不固定问题的方法
- OverlayScrollbars库控制HTML滚动条显示位置的使用方法
- 为何图像链接显示为 HTTP 实际传输却是 HTTPS
- contenteditable 编辑器中怎样通过 Shift+Enter 保持结构完整
- Echarts地图鼠标移入显示数据出现NaN值的解决方法
- CSS盒子始终保持在页面底部的方法
- HTML中Ruby标签间有间隔该如何解决
- OverlayScrollbars库控制HTML页面滚动条位置的使用方法
- 若依框架切换标签页时页面重载问题如何解决
- 怎样高效让Input焦点定位到右侧末尾
- 双击父元素时怎样避免触发子元素点击事件
- 为何在 Vue 路由文件夹的 index.js 里注册 VueRouter
- 怎样把 HTML 滚动条限定在特定 div 内并自行设定其位置