uniapp上传图片名字保持不变
在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 对象上传图片
之前我们使用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 中上传图片,我们可以通过获取图片的原始信息来取得文件名和后缀名,然后再将文件名和数据一起上传。这样就可以解决由于不同平台或者特殊命名规则带来的问题,可以更好地处理上传的图片。
以上是uniapp上传图片名字保持不变的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

文章讨论了在Uni-App中使用SASS和较少的预处理器,详细的设置,福利和双重用法。主要重点是配置和优势。[159个字符]

本文讨论了针对Uniapp应用程序的各种测试类型,包括单元,集成,功能,UI/UX,性能,跨平台和安全测试。它还涵盖了确保跨平台兼容性,并推荐Jes等工具

本文介绍了如何使用Uni-App的动画API,详细介绍了创建和应用动画,关键功能以及结合和控制动画时机的方法。CharacterCount:159

文章讨论了用于Uniapp开发的调试工具和最佳实践,重点关注Hbuilderx,微信开发人员工具和Chrome DevTools等工具。

本文详细介绍了一个Uni-App项目的文件结构,并解释了关键目录,例如通用,组件,页面,静态和unicloud,以及诸如app.vue,main.js,subtest.json,pages.json和uni.scss之类的关键文件。它讨论了这个o

本文介绍了如何使用Uni-App的存储API(Uni.setStorage,Uni.GetStorage)进行本地数据管理,讨论了最佳实践,故障排除以及突出显示限制和考虑因素,以进行有效使用。

本文讨论了使用Uni-App的API访问诸如相机和地理位置之类的设备功能,包括权限设置和错误处理。
