iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >uniapp上传图片名字保持不变
  • 692
分享到

uniapp上传图片名字保持不变

2023-05-22 13:05:31 692人浏览 八月长安
摘要

在uniapp中,我们经常会使用到上传图片的功能,但是默认情况下,上传图片的文件名会被重命名或者不同的平台会有不同的表现,这对于后端处理和前端展示都会带来不小的问题。所以,在开发中,我们往往需要保持上传的图片名字不变。本文将介绍在uniap

在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上传图片名字保持不变的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: uniapp上传图片名字保持不变

本文链接: https://www.lsjlt.com/news/216131.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • uniapp上传图片名字保持不变
    在uniapp中,我们经常会使用到上传图片的功能,但是默认情况下,上传图片的文件名会被重命名或者不同的平台会有不同的表现,这对于后端处理和前端展示都会带来不小的问题。所以,在开发中,我们往往需要保持上传的图片名字不变。本文将介绍在uniap...
    99+
    2023-05-22
  • uniapp上传图片后台接收不到怎么办
    在移动应用开发中,上传图片是一项非常基础的功能。而uniapp作为目前非常受欢迎的跨平台开发框架,也自然具备该功能。然而,有些开发者在使用uniapp开发上传图片功能时遇到了一个问题:上传图片后台接收不到。那么,这个问题该如何解决呢?一、问...
    99+
    2023-05-14
  • uniapp小程序解决不能上传文件/图片问题
    uniapp小程序解决不能上传文件/图片问题 当前uniapp微信小程序无法使用formData( )来上传文件/图片,会出现FormData is not defined 问题, 而官方给的un...
    99+
    2023-10-01
    小程序 uni-app 微信小程序 javascript vue
  • 使用php怎么压缩图片并保持大小不变
    这篇文章将为大家详细讲解有关使用php怎么压缩图片并保持大小不变,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。cdn静态资源包oss管理文件资源,不一定是图片,也可以是文件哦搭建自己的文件服...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作