Apakah yang perlu saya lakukan jika imej yang dikembalikan oleh uniapp tidak dipaparkan?

Apabila saya menggunakan uniapp untuk membangunkan aplikasi mudah alih baru-baru ini, saya menghadapi masalah: gambar yang dikembalikan tidak dipaparkan. Di sini hari ini, saya akan berkongsi dengan anda bagaimana saya menyelesaikan masalah ini.

Pertama sekali, saya ingin memperkenalkan uniapp secara ringkas. Ia ialah rangka kerja pembangunan aplikasi merentas platform berdasarkan rangka kerja Vue.js, yang boleh menggunakan HTML, CSS dan JavaScript untuk membina aplikasi iOS dan Android. Menggunakan uniapp membolehkan kami menulis kod sekali dan menjalankannya pada berbilang platform tanpa perlu membangunkannya secara berasingan untuk setiap platform.

Kembali kepada topik, apabila saya membuka kamera atau galeri dalam apl untuk memilih foto, gambar itu dikembalikan kepada apl daripada kamera atau galeri, tetapi ia tidak muncul dalam apl. Saya menyemak kod dan mendapati tiada ralat, jadi saya memutuskan untuk menyemak sama ada laluan ke imej itu betul, kerana jika laluan ke imej itu salah, imej itu tidak akan dipaparkan.

Apabila menyemak laluan imej, saya mendapati bahawa masalahnya terletak pada alamat imej. Dalam uniapp, kami biasanya menggunakan pengekodan base64 untuk memaparkan imej, tetapi dalam aplikasi saya, saya tidak menggunakan pengekodan base64, tetapi menggunakan laluan sebenar imej. Itulah sebabnya gambar tidak dipaparkan dengan betul.

Untuk menyelesaikan masalah ini, saya perlu mengubah suai kod untuk menggunakan pengekodan base64. Dalam Vue.js, kita boleh menggunakan kaedah btoa() untuk menukar fail kepada pengekodan base64. Berikut ialah kod saya yang diubah suai:

getLocalImgUrl: function (file) {
  return new Promise((resolve) => {
    var reader = new FileReader();
    reader.onloadend = function () {
      resolve(reader.result);
    }
    reader.readAsDataURL(file);
  })
},

Fungsi ini menukar fail kepada pengekodan base64 dan mengembalikan hasil yang dikodkan base64 sebagai rentetan. Selepas saya memilih foto, saya memanggil fungsi ini dan menyimpan pengekodan base64 yang dikembalikan dalam sifat data komponen Vue.js. Berikut ialah kod yang diubah suai:

chooseImage: function () {
  var that = this;
  uni.chooseImage({
    count: 1,
    success: function (res) {
      that.getLocalImgUrl(res.tempFiles[0]).then((result) => {
        that.localImage = result; // 将base64编码的字符串存储在data属性中
      });
    }
  });
},

Kini apabila saya memilih foto dan kembali ke apl, imej itu berjaya dipaparkan dalam apl. Isu ini telah diselesaikan.

Untuk meringkaskan, uniapp ialah rangka kerja pembangunan aplikasi merentas platform yang sangat praktikal. Untuk berjaya membangunkan aplikasi, kita perlu menyemak semula kod dan memastikan bahawa laluan imej adalah betul, pengekodan base64 digunakan, dsb. Saya harap pengalaman saya dapat membantu pembangun yang menghadapi masalah yang sama.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika imej yang dikembalikan oleh uniapp tidak dipaparkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!