我的编程空间,编程开发者的网络收藏夹
学习永远不晚

uniapp上传图片名字保持不变

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

uniapp上传图片名字保持不变

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

本文将介绍在uniapp中如何实现上传图片名字保持不变的方法。

一、前言

在uniapp中,图片上传主要使用uni.uploadFile() 的API接口。通过这个接口,我们可以上传图片到服务器。但是,uni.uploadFile() 会根据不同平台或者文件特殊命名规则给图片文件命名,导致我们无法很好地处理上传的图片。那么,在使用 uni.uploadFile() 时,如何保持上传图片的名字不变呢?

二、获取上传图片原始信息

我们可以通过uni.chooseImage() API接口选中图片时,获取图片的原始信息,取得文件名和后缀名。

uni.chooseImage({
    count: 1,
    success: function(res) {
        uni.getImageInfo({
            class="lazy" data-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({
            class="lazy" data-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上传图片名字保持不变的详细内容,更多请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

uniapp上传图片名字保持不变

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

下载Word文档

猜你喜欢

uniapp上传图片名字保持不变

在uniapp中,我们经常会使用到上传图片的功能,但是默认情况下,上传图片的文件名会被重命名或者不同的平台会有不同的表现,这对于后端处理和前端展示都会带来不小的问题。所以,在开发中,我们往往需要保持上传的图片名字不变。本文将介绍在uniapp中如何实现上传图片名字保持不变的方法。一、前言在uniapp中,图片上传主要使用uni.uploadFile() 的API接口。通过这个接
2023-05-22

Uniapp图片上传网络不稳定怎么解决

如果Uniapp图片上传网络不稳定,你可以尝试以下解决方法:检查网络连接:确保你的网络连接稳定,可以尝试连接其他网络或者重启路由器。重新上传:如果图片上传失败,可以尝试重新上传图片。压缩图片:尝试将图片压缩至较小的大小,以减少上传时间和网络
Uniapp图片上传网络不稳定怎么解决
2024-03-15

uniapp上传图片后台接收不到怎么办

在移动应用开发中,上传图片是一项非常基础的功能。而uniapp作为目前非常受欢迎的跨平台开发框架,也自然具备该功能。然而,有些开发者在使用uniapp开发上传图片功能时遇到了一个问题:上传图片后台接收不到。那么,这个问题该如何解决呢?一、问题分析首先,我们需要对问题进行分析。上传图片后台接收不到,那么很明显,问题出在前端代码上。我们可以从以下几个方面入手:1. 图片上传的请求是
2023-05-14

使用php怎么压缩图片并保持大小不变

这篇文章将为大家详细讲解有关使用php怎么压缩图片并保持大小不变,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1.cdn静态资源包2.oss管理文件资源,不一定是图片,也可以是文件哦3.搭建
2023-06-14

编程热搜

目录