uniapp上传图片名字保持不变

首先，我们需要先了解一下uniapp上传图片的机制。通常情况下，在uniapp中上传图片时，我们可以使用uni.uploadFile()API来实现。该API提供了一个上传文件的方法，允许我们上传本地文件或应用程序的临时文件。上传的过程中，服务器端会创建一个文件名，并将上传的文件保存到指定的目录中。因此，我们需要重命名文件并保存文件到指定的路径中。本文将介绍如何在uniapp上传图片时，保持图片名称保持不变。 第一段： 在uniapp中，我们可以通过uni.uploadFile()方法来上传图片。在使用该方法时，我们可以设置headers、formData、fileType、filePath等参数。其中，filePath参数表示要上传的本地文件路径，而fileType表示要上传文件类型。我们可以通过配置headers来向服务器发送上传时需要的http header。formData参数可用于设置上传附带信息。下面是一个简单的示例，演示了如何上传一张图片。

上传图片代码示例 1

uni.chooseImage({
	success: function (res) {
		var tempFilePaths = res.tempFilePaths
		uni.uploadFile({
			url: 'http://example.com/upload',
			filePath: tempFilePaths[0],
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: function (res) {
				console.log(res.data)
			}
		})
	}
})

这个示例演示了使用uni.uploadFile()方法上传图片的基本用法。我们可以先调用uni.chooseImage()来让用户选择一张图片，然后将选中的图片路径传递到uni.uploadFile()方法中。通过设置name、formData等参数，我们可以向服务器端发送附带信息。 第二段： 如果我们想在上传时保持图片名称不变，我们需要先获得上传图片的名称信息。在uniapp中，我们可以使用wx.getFileInfo()来获得一个文件的信息。该方法可以用于获取文件大小、创建时间和修改时间等信息。我们可以通过获取上传文件的名称，并传递到服务器端进行保存。下面是一个示例代码，演示了如何在上传图片时保持图片的文件名不变。

上传图片代码示例 2

uni.chooseImage({
	success: function (res) {
		var tempFilePaths = res.tempFilePaths;
		
		wx.getFileInfo({
			filePath: tempFilePaths[0],
			success: function (res) {
				var fileName = res.fileName;
				
				uni.uploadFile({
					url: 'http://example.com/upload',
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {
						'user': 'test',
						'fileName': fileName
					},
					success: function (res) {
						console.log(res.data)
					}
				})
			},
			fail: function (res) {
				
			}
		})
	}
})

这个示例演示了如何通过wx.getFileInfo()方法获取上传图片的文件名，并将其传递到formData参数中。服务器端可以通过解析该参数，并将文件保存到指定路径中。 第三段： 如果我们希望上传多个文件时，所有文件的名称都保持不变，我们需要对每个文件都执行相同的操作。在下面的示例中，我们将使用uni.uploadFile()和Promise.all()方法，实现同时上传多个文件，并保持文件名称不变。Promise.all()方法可以用于并行处理一系列操作。我们将在Promise.all()中传入一个uploadFilePromise数组，该数组包含所有请求的Promise对象。

上传图片代码示例 3

var uploadFilePromise = []
uni.chooseImage({
	count: 9,
	success: function (res) {
		var tempFilePaths = res.tempFilePaths
		for (var i = 0; i < tempFilePaths.length; i++) {
			var tempFilePath = tempFilePaths[i]
			
			uploadFilePromise.push(new Promise((resolve, reject) => {
				wx.getFileInfo({
					filePath: tempFilePath,
					success: function (res) {
						var fileName = res.fileName;
						uni.uploadFile({
							url: 'http://example.com/upload',
							filePath: tempFilePath,
							name: 'file',
							formData: {
								'user': 'test',
								'fileName': fileName
							},
							success: function (res) {
								resolve(res.data)
							},
							fail: function (res) {
								reject(res)
							}
						})
					}
				})
			}))
		}
		
		Promise.all(uploadFilePromise).then((resData) => {
			console.log('上传完毕')
		}).catch((error) => {
			console.log('上传失败：', error)
		})
	}
})

在这个示例中，我们使用了一个uploadFilePromise数组，将所有的上传Promise对象存储起来。然后使用Promise.all()并行上传所有文件。当所有文件上传完毕后，Promise.all()将返回一个包含所有请求的响应数据的数组。我们可以在该数组中查看上传的状态。 第四段： 最后，我们需要在服务器端实现保存文件到指定的路径中。在Node.js中，我们可以使用fs模块来实现文件的操作。例如，我们可以使用fs.rename()方法来对文件进行重命名操作。下面是一个简单的Node.js服务器端示例，演示了如何处理上传的文件并保存到指定目录中。

Node.js服务器端示例代码

var bodyParser = require('body-parser');
var express = require('express');
var multer = require('multer');
var app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

var storage = multer.diskStorage({
	destination: function (req, file, cb) {
		cb(null, '/path/to/save')
	},
	filename: function (req, file, cb) {
		cb(null, file.originalname)
	}
})

var upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), function(req, res, next) {
	res.send('上传成功')
})

app.listen(3000);

在上面的示例中，我们使用了multer模块来处理上传的文件。我们通过指定存储目录和文件名的方式，来将上传的文件保存到指定的目录中。当文件上传完毕后，服务器端会返回一个“上传成功”的信息。 综上所述，我们可以通过在uniapp中使用uni.uploadFile()和wx.getFileInfo()方法，来保持上传图片的名称不变。并且，在上传多个文件时，我们可以使用Promise.all()方法来并行处理上传操作，从而提高上传效率。而在服务器端，我们可以利用Node.js提供的fs模块来处理上传的文件，并将其保存到指定的目录中。