Bagaimana untuk menyelesaikan masalah bahawa gambar album yang dipilih tidak dipaparkan dalam projek uniapp

Dalam proses membangunkan dengan Uniapp, kita sering perlu menggunakan fungsi memilih gambar album Namun, kadangkala kita menghadapi masalah bahawa gambar tidak dipaparkan selepas pemilihan. Dalam artikel ini, saya akan menerangkan mengapa masalah ini berlaku dan cara menyelesaikannya.

1. Mengapakah terdapat masalah gambar album tidak dipaparkan?

1. Isu kebenaran

Dalam sistem Android, kami perlu memohon kebenaran secara dinamik untuk membaca storan luaran sebelum kami boleh mengakses album Jika kami tidak berjaya memohon kebenaran, gambar dalam album tidak akan dapat dibaca dan tidak boleh dipaparkan.

2. Isu jenis data

Apabila memanggil API untuk memilih gambar album, kami perlu mengembalikan tatasusunan untuk memuatkan gambar yang dipilih, tetapi kadangkala data mungkin muncul dalam masalah ketidakpadanan jenis A kami menghalang imej yang dipilih daripada dipaparkan pada halaman.

3. Masalah laluan

Gambar yang dipilih dalam album perlu dipaparkan menggunakan laluan gambar apabila dipindahkan ke halaman hujung hadapan, tetapi jika laluan kita ditulis dengan salah atau nama fail tidak sepadan, ia juga akan menyebabkan Imej yang dipilih tidak dapat dipaparkan dengan betul.

2. Bagaimana untuk menyelesaikan masalah gambar album tidak dipaparkan?

1. Semak isu kebenaran

Apabila memilih gambar album, kami perlu memohon kebenaran untuk membaca storan luaran Jika permohonan kebenaran kami tidak berjaya, kami perlu menyemak. Anda boleh menyelesaikan masalah kebenaran melalui langkah berikut:

(1) Tambahkan kebenaran storan luaran baca dalam fail manifest.json:

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

(2) Pilih album yang anda mahu gunakan Dalam halaman fungsi gambar, gunakan kaedah uni.requestAuthorize untuk memohon kebenaran:

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

2 Semak masalah jenis data

Jika jenis data kami tidak sepadan, pilihan gambar tidak boleh dipaparkan seperti biasa pada halaman. Kita perlu memberi perhatian kepada jenis data yang digunakan dalam kod, seperti contoh berikut:

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

Dalam kod di atas, kami menyimpan laluan sementara imej yang dipilih dalam tatasusunan imgList, jadi jika kita perlu Imej yang dipilih boleh dipaparkan dalam kaedah berikut:

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

Dalam kod di atas, kami menggunakan v-for untuk melintasi setiap elemen dalam tatasusunan imgList, dan gunakan tag :image untuk menambah imej yang dipaparkan pada halaman.

3 Semak isu laluan

Kita perlu menggunakan laluan yang betul untuk rujukan semasa memaparkan imej, jadi kita perlu menyemak dengan teliti sama ada laluan imej itu betul dan sama ada terdapat ralat ejaan dan isu lain. Biasanya, apa yang kita kembalikan selepas memilih gambar adalah laluan sementara, tetapi apabila memaparkan gambar kita perlu menggunakan laluan tempatan. Kita boleh mendapatkan laluan setempat melalui kaedah berikut:

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('访问失败')
        }
});

Melalui kaedah di atas, kita boleh menyimpan imej yang dipilih secara setempat dan memanggil fungsi panggil balik selepas berjaya menyimpan untuk mendapatkan dan memaparkan laluan.

Ringkasan

Gambar album yang tidak dipaparkan adalah masalah biasa apabila kami membangunkan menggunakan Uniapp. Biasanya, masalah ini disebabkan oleh kebenaran yang salah, jenis data, atau laluan, dsb. Kami boleh menyelesaikan masalah ini dengan menyemak kebenaran, jenis data dan laluan. Saya harap artikel ini dapat membantu semua orang dan menjadikan proses pembangunan Uniapp lebih lancar.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah bahawa gambar album yang dipilih tidak dipaparkan dalam projek uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!