Heim > Web-Frontend > uni-app > Der Name des von uniapp hochgeladenen Bildes bleibt unverändert

Der Name des von uniapp hochgeladenen Bildes bleibt unverändert

WBOY
Freigeben: 2023-05-22 13:40:37
Original
2390 Leute haben es durchsucht

In Uniapp verwenden wir häufig die Funktion zum Hochladen von Bildern, aber standardmäßig wird der Dateiname des hochgeladenen Bildes umbenannt oder verschiedene Plattformen weisen unterschiedliche Leistungen auf. Dies ist nicht für die Back-End-Verarbeitung und die Front-End-Verarbeitung geeignet. Endanzeige. Es wird einige Probleme verursachen. Daher müssen wir während der Entwicklung häufig den Namen des hochgeladenen Bildes unverändert lassen.

In diesem Artikel erfahren Sie, wie Sie den Namen hochgeladener Bilder in Uniapp unverändert lassen.

1. Einführung

In Uniapp wird beim Hochladen von Bildern hauptsächlich die API-Schnittstelle von uni.uploadFile() verwendet. Über diese Schnittstelle können wir Bilder auf den Server hochladen. Allerdings benennt uni.uploadFile() Bilddateien nach unterschiedlichen Plattformen oder speziellen Dateibenennungsregeln, was dazu führt, dass wir hochgeladene Bilder nicht gut verarbeiten können. Wie lässt sich also der Name des hochgeladenen Bildes bei Verwendung von uni.uploadFile() unverändert lassen?

2. Erhalten Sie die Originalinformationen des hochgeladenen Bildes

Wenn wir das Bild über die API-Schnittstelle uni.chooseImage() auswählen, können wir die Originalinformationen des Bildes erhalten und erhalten Sie den Dateinamen und den Suffixnamen.

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('.'));
            }
        });
    }
});
Nach dem Login kopieren

3. Verwenden Sie das formData-Objekt, um Bilder hochzuladen

Bevor wir die Schnittstelle uni.uploadFile() zum Hochladen von Bildern verwendet haben, kann der Dateiparameter dieser Schnittstelle jedoch nur Akzeptiert Dateipfade, nicht. Empfängt ein FormData-Objekt. In this.formData können wir ein FormData-Objekt erstellen und den Dateinamen des hochgeladenen Bildes zusammen mit den Dateidaten hochladen.

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);
                    }
                });
            }
        });
    }
});
Nach dem Login kopieren

Durch die oben beschriebene Methode können wir den Namen des hochgeladenen Bildes unverändert lassen.

4. Zusammenfassung

Beim Hochladen von Bildern in Uniapp können wir den Dateinamen und das Suffix abrufen, indem wir die Originalinformationen des Bildes abrufen und dann den Dateinamen und die Daten hochladen zusammen. Dies kann Probleme lösen, die durch unterschiedliche Plattformen oder spezielle Namensregeln verursacht werden, und hochgeladene Bilder besser verarbeiten.

Das obige ist der detaillierte Inhalt vonDer Name des von uniapp hochgeladenen Bildes bleibt unverändert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage