ホームページ >ウェブフロントエンド >uni-app >uniapp によってアップロードされた画像の名前は変更されません。

uniapp によってアップロードされた画像の名前は変更されません。

WBOY
WBOYオリジナル
2023-05-22 13:40:372391ブラウズ

uniappでは画像をアップロードする機能をよく使いますが、デフォルトではアップロードした画像のファイル名が変更されたり、プラットフォームが異なるとパフォーマンスが異なり、バックエンド処理とフロントエンド表示の両方に影響を与えます。 . かなりの問題を引き起こします。したがって、開発中は、アップロードされたイメージの名前を変更しない必要があることがよくあります。

この記事では、uniappでアップロードした画像の名前を変更しない方法を紹介します。

1. はじめに

uniapp では、画像のアップロードには主に uni.uploadFile() の API インターフェースを使用します。このインターフェイスを通じて、画像をサーバーにアップロードできます。ただし、uni.uploadFile() はさまざまなプラットフォームや特別なファイル命名規則に従って画像ファイルに名前を付けるため、アップロードされた画像を適切に処理できなくなります。では、uni.uploadFile() を使用するときに、アップロードされた画像の名前を変更しないようにするにはどうすればよいでしょうか?

2. アップロードされた画像の元の情報を取得する

画像の元の情報を取得し、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('.'));
            }
        });
    }
});

3. 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);
                    }
                });
            }
        });
    }
});

上記の方法により、アップロードした画像の名前を変更しないで済みます。

4. まとめ

uniappで画像をアップロードする際、画像の元情報を取得することでファイル名と拡張子を取得し、ファイル名とデータを一緒にアップロードすることができます。これにより、さまざまなプラットフォームや特別な命名規則によって引き起こされる問題が解決され、アップロードされた画像をより適切に処理できるようになります。

以上がuniapp によってアップロードされた画像の名前は変更されません。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。