Le nom de l'image téléchargée par uniapp reste inchangé

Dans uniapp, nous utilisons souvent la fonction de téléchargement d'images, mais par défaut, le nom de fichier de l'image téléchargée sera renommé ou différentes plates-formes auront des performances différentes, ce qui entraînera des problèmes de traitement back-end et d'affichage front-end. Ce n'est pas un petit problème. Par conséquent, pendant le développement, nous devons souvent conserver le nom de l’image téléchargée inchangé.

Cet article explique comment conserver le nom des images téléchargées inchangé dans uniapp.

1. Introduction

Dans uniapp, le téléchargement d'images utilise principalement l'interface API d'uni.uploadFile(). Grâce à cette interface, nous pouvons télécharger des images sur le serveur. Cependant, uni.uploadFile() nommera les fichiers image en fonction de différentes plates-formes ou de règles de dénomination de fichiers spéciales, ce qui nous empêchera de bien gérer les images téléchargées. Alors, comment conserver le nom de l’image téléchargée inchangé lors de l’utilisation d’uni.uploadFile() ?

2. Obtenez les informations originales de l'image téléchargée

Nous pouvons obtenir les informations originales de l'image et obtenir le nom du fichier et le suffixe lors de la sélection de l'image via l'interface API uni.chooseImage().

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. Utilisez l'objet formData pour télécharger des images

Avant, nous utilisions l'interface uni.uploadFile() pour télécharger des images. Cependant, le paramètre file de cette interface ne peut accepter que les chemins de fichiers et ne peut pas recevoir d'objets FormData. Dans this.formData, nous pouvons créer un objet FormData et télécharger le nom de fichier de l'image téléchargée avec les données du fichier.

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

Grâce à la méthode ci-dessus, nous pouvons conserver le nom de l'image téléchargée inchangé.

4. Résumé

Lors du téléchargement d'images dans uniapp, nous pouvons obtenir le nom du fichier et le suffixe en obtenant les informations originales de l'image, puis télécharger le nom du fichier et les données ensemble. Cela peut résoudre des problèmes causés par différentes plates-formes ou des règles de dénomination spéciales, et mieux gérer les images téléchargées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!