在uniapp中，我们经常会使用到上传图片的功能，但是默认情况下，上传图片的文件名会被重命名或者不同的平台会有不同的表现，这对于后端处理和前端展示都会带来不小的问题。所以，在开发中，我们往往需要保持上传的图片名字不变。
本文将介绍在uniapp中如何实现上传图片名字保持不变的方法。
一、前言
在uniapp中，图片上传主要使用uni.uploadFile() 的API接口。通过这个接口，我们可以上传图片到服务器。但是，uni.uploadFile() 会根据不同平台或者文件特殊命名规则给图片文件命名，导致我们无法很好地处理上传的图片。那么，在使用 uni.uploadFile() 时，如何保持上传图片的名字不变呢？
二、获取上传图片原始信息
我们可以通过uni.chooseImage() API接口选中图片时，获取图片的原始信息，取得文件名和后缀名。
uni.chooseImage({
count: 1,
success: function(res) {
uni.getImageInfo({
src: res.tempFilePaths[0],
success: function(infoRes) {
//文件名
var fileName = res.tempFilePaths[0].substring(res.tempFilePaths[0].lastIndexOf('/') + 1);
//后缀名
var extName = fileName.substring(fileName.lastIndexOf('.'));
}
});
}
});三、使用 formData 对象上传图片
本版本采用三顾购物平台，适合应用于化妆品销售。一、商品管理 商品发布：支持4种自定义价格，自定义商品字段完美支持多种行业应用，商品显示属性控制，不限上传商品图片，每个商品均有5帧幻灯片支持，拥有新品、特价、推荐等属性，可自定义随意编写商品介绍。商品管理：按各种属性查看商品列表、库存及价格，管理具体商品。商品评论：管理审核删除回复网友对商品的评级及评论。另支持品牌管理、单位管理、赠品管理等。二、订单
之前我们使用uni.uploadFile()接口上传图片，但是，该接口的file参数只能接受文件路径，不能接收 FormData 对象。在 this.formData 中，我们可以创建 FormData 对象，将上传图片的文件名与文件数据一起上传。
uni.chooseImage({
count: 1,
success: function(res) {
uni.getImageInfo({
src: res.tempFilePaths[0],
success: function(infoRes) {
//文件名
var fileName = res.tempFilePaths[0].substring(res.tempFilePaths[0].lastIndexOf('/') + 1);
//后缀名
var extName = fileName.substring(fileName.lastIndexOf('.'));
// 将文件数据赋值到formData对象中
this.formData = new FormData();
this.formData.append('file', res.tempFiles[0].path, fileName + extName);
console.log('开始上传文件')
uni.uploadFile({
url: '上传文件的url',
filePath: res.tempFilePaths[0],
name: 'file',
formData: this.formData,
success: function (res) {
console.log(res);
}
});
}
});
}
});通过以上方式，我们就可以保持上传图片的名字不变。
四、总结
在 uniapp 中上传图片，我们可以通过获取图片的原始信息来取得文件名和后缀名，然后再将文件名和数据一起上传。这样就可以解决由于不同平台或者特殊命名规则带来的问题，可以更好地处理上传的图片。
