So lösen Sie das Problem, dass die ausgewählten Albumbilder nicht im Uniapp-Projekt angezeigt werden

Beim Entwickeln mit Uniapp müssen wir häufig die Funktion zum Auswählen von Albumbildern verwenden. Manchmal stoßen wir jedoch auf das Problem, dass die Bilder nach der Auswahl nicht angezeigt werden. In diesem Artikel erkläre ich, warum dieses Problem auftritt und wie man es löst.

1. Warum gibt es das Problem, dass die Albumbilder nicht angezeigt werden?

1. Berechtigungsprobleme

Im Android-System müssen wir dynamisch die Erlaubnis zum Lesen des externen Speichers beantragen, bevor wir auf das Fotoalbum zugreifen können. Wenn wir die Erlaubnis nicht erfolgreich beantragen, werden die Bilder im Fotoalbum nicht angezeigt gelesen werden und daher nicht angezeigt werden können.

2. Datentypproblem

Wenn wir die API zum Auswählen von Albumbildern aufrufen, müssen wir ein Array zurückgeben, um die ausgewählten Bilder zu laden. Manchmal liegt jedoch eine Nichtübereinstimmung des Datentyps in unserem Code vor, was dazu führt, dass alle ausgewählten Bilder nicht verfügbar sind auf der Seite angezeigt werden.

3. Pfadproblem

Die im Album ausgewählten Bilder müssen beim Übertragen auf die Startseite mit dem Pfad des Bildes angezeigt werden. Wenn unser Pfad jedoch falsch geschrieben ist oder der Dateiname nicht übereinstimmt, wird der Das ausgewählte Bild wird nicht normal angezeigt.

2. Wie kann das Problem gelöst werden, dass Albumbilder nicht angezeigt werden?

1. Berechtigungsprobleme prüfen

Bei der Auswahl von Albumbildern müssen wir eine Erlaubnis zum Lesen des externen Speichers beantragen. Wenn unser Erlaubnisantrag nicht erfolgreich ist, müssen wir dies überprüfen. Sie können das Berechtigungsproblem lösen, indem Sie die folgenden Schritte ausführen:

(1) Fügen Sie die Berechtigung zum Lesen externen Speichers in der Datei manifest.json hinzu:

"android": {
    "permission": [
      "android.permission.READ_EXTERNAL_STORAGE"
    ]
  }

(2) Auf der Seite, auf der Sie die Funktion zum Auswählen von Albumbildern verwenden möchten , verwenden Sie die uni.requestAuthorize-Methode, um die Berechtigung zu beantragen:

uni.requestAuthorize({
    scope: 'scope.writePhotosAlbum',
    success() {
        console.log('授权成功')
    },
    fail() {
        console.log('授权失败')
    }
})

2. Überprüfen Sie die Datentypprobleme

Wenn unsere Datentypen nicht übereinstimmen, kann das ausgewählte Bild nicht normal auf der Seite angezeigt werden. Wir müssen auf den im Code verwendeten Datentyp achten, wie im folgenden Beispiel:

data() {
    return {
       imgList: [],
    }
},
methods: {
    chooseImage(){
        uni.chooseImage({
            count: 3,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: function (res) {
                this.imgList = res.tempFilePaths; // 选择图片成功后将图片路径存入imgList数组
            }
        })
    }
}

Im obigen Code speichern wir den temporären Pfad des ausgewählten Bildes im imgList-Array, wenn wir also das ausgewählte Bild anzeigen müssen Bild auf der Seite, kann auf folgende Weise erfolgen:

<view>
    <image v-for="(item,index) in imgList" :src="item"></image>
</view>

Im obigen Code verwenden wir v-for, um jedes Element im imgList-Array zu durchlaufen, und verwenden das :image-Tag, um das Bild auf der Seite anzuzeigen.

3. Auf Pfadprobleme prüfen

Wir müssen beim Anzeigen von Bildern den richtigen Pfad als Referenz verwenden. Daher müssen wir sorgfältig prüfen, ob der Bildpfad korrekt ist und ob Rechtschreibfehler und andere Probleme vorliegen. Normalerweise geben wir nach der Auswahl eines Bildes einen temporären Pfad zurück, aber wenn wir das Bild anzeigen, müssen wir einen lokalen Pfad verwenden. Wir können den lokalen Pfad über die folgende Methode erhalten:

let realPath = '';
uni.getFileSystemManager().access({
        path: tempFilePaths,
        success() {
            realPath = wx.env.USER_DATA_PATH + '/' + new Date().getTime() + '.png'; //使用 wx.env.USER_DATA_PATH 获取本地存储路径
            uni.getFileSystemManager().saveFile({
                tempFilePath: tempFilePaths, // 临时文件地址
                filePath: realPath,
                success: (res) => {
                        console.log('保存图片到本地成功:' + res.savedFilePath)
                },
                fail: function (res) {
                    console.log(res);
                }
            });
        },
        fail() {
            console.log('访问失败')
        }
});

Mit der oben genannten Methode können wir das ausgewählte Bild lokal speichern und nach erfolgreichem Speichern die Rückruffunktion aufrufen, um den Pfad abzurufen und anzuzeigen.

Zusammenfassung

Dass Albumbilder nicht angezeigt werden, ist ein häufiges Problem, wenn wir mit Uniapp entwickeln. Typischerweise wird dieses Problem durch falsche Berechtigungen, Datentypen, Pfade usw. verursacht. Wir können dieses Problem lösen, indem wir Berechtigungen, Datentypen und Pfade überprüfen. Ich hoffe, dieser Artikel kann allen helfen und den Uniapp-Entwicklungsprozess reibungsloser gestalten.

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die ausgewählten Albumbilder nicht im Uniapp-Projekt angezeigt werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!