2023uniapp上传图片名字保持不变

 所属分类:web前端开发

 浏览:104次-  评论: 0次-  更新时间:2023-05-24
描述:更多教程资料进入php教程获得。 在uniapp中,我们经常会使用到上传图片的功能,但是默认情况下,上传图片的文件名会被重命名或者不同的平台...
更多教程资料进入php教程获得。

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

 标签: ,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!