Bagaimana untuk menyelesaikan masalah bahawa php tidak boleh menerima pelbagai muat naik imej dalam uniapp

1. Pengenalan latar belakang

Dengan perkembangan teknologi Internet yang berterusan, semakin banyak aplikasi web perlu menyokong fungsi muat naik imej. Uniapp ialah rangka kerja pembangunan mudah alih yang sangat popular, yang merentas platform, cekap dan mudah digunakan. Walau bagaimanapun, apabila kami menggunakan uniapp untuk membangunkan fungsi muat naik berbilang imej, kami akan menghadapi beberapa masalah: pelayan tidak dapat menerima permintaan dengan betul dan tidak boleh mendapatkan maklumat imej yang diluluskan. Artikel ini akan meneroka kemungkinan punca dan penyelesaian kepada masalah ini.

2. Penerangan Masalah

Kami menggunakan pemalam komponen muat naik yang disediakan oleh uniapp uni-upload untuk membangunkan fungsi muat naik berbilang imej dan menggunakan kod back-end PHP untuk menerima permintaan muat naik dan menyimpan maklumat imej. Kod untuk halaman muat naik adalah seperti berikut:

<template>
  <view class="container">
    <view class="uploadBtn" @tap="chooseImage">
      <image src="../../static/plus.png"></image>
    </view>
    <view class="image-list">
      <view class="image-item" v-for="(item, index) in fileList" :key="index">
        <image :src="item.path"></image>
        <view class="delete" @tap="deleteImage(index)">删除</view>
      </view>
    </view>
    <view class="submitBtn" @tap="submit">
      提交
    </view>
  </view>
</template>

<script>
  import uniUpload from "@/components/uni-upload/uni-upload.vue";
  export default {
    components: { uniUpload },
    data() {
      return {
        fileList: [],
      };
    },
    methods: {
      chooseImage() {
        uni.chooseImage({
          count: 9,
          success: (res) => {
            this.fileList = [...this.fileList, ...res.tempFilePaths.map((path) => ({ path }))];
          },
        });
      },
      deleteImage(index) {
        this.fileList.splice(index, 1);
      },
      submit() {
        const formData = new FormData();
        this.fileList.forEach((item, index) => {
          formData.append(`file${index}`, item.path);
        });

        uni.request({
          method: "POST",
          url: "http://localhost/upload.php",
          header: {
            "Content-Type": "multipart/form-data",
          },
          data: formData,
          success: (res) => {
            console.log("upload success", res.data);
          },
          fail: (error) => {
            console.log("upload fail", error);
          },
        });
      },
    },
  };
</script>

Komponen muat naik menggunakan pemalam uni-upload, yang memanggil album untuk memilih imej melalui kaedah chooseImage, mengisi laluan imej dalam tempFilePaths ke dalam fileList, dan pada masa yang sama Dalam kaedah submit, laluan imej dalam fileList dimuat naik ke pelayan bahagian belakang.

Di bahagian pelayan, kami menggunakan PHP sebagai bahasa back-end, kodnya adalah seperti berikut:

<?php
  $upload_dir = "uploads/";
  if (!file_exists($upload_dir)) {
    mkdir($upload_dir);
  }
  foreach ($_FILES as $key => $file) {
    $tmp_name = $file["tmp_name"];
    $name = $file["name"];
    if (move_uploaded_file($tmp_name, $upload_dir . $name)) {
      echo "upload success ";
    } else {
      echo "upload fail ";
    }
  }
?>

Dalam ujian tempatan, didapati bahawa selepas menyerahkan imej, pelayan bahagian belakang tidak dapat membaca permintaan muat naik dengan betul, gambar tidak dapat disimpan dengan betul. Beberapa penyelesaian akan dicadangkan di bawah.

3. Punca masalah

Menurut mesej ralat, ia mungkin disebabkan oleh kaedah muat naik fail yang salah. FormData dan multipart/form-data kini merupakan cara penting untuk melaksanakan muat naik fail melalui borang Walau bagaimanapun, jika maklumat pengepala permintaan yang sesuai tidak ditetapkan, pelayan tidak boleh mendapatkan fail yang dimuat naik dengan betul, yang mungkin menjadi punca masalah ini.

Empat Penyelesaian

1. Tukar maklumat pengepala permintaan

Tambahkan jenis kandungan pengepala dan sempadan dalam permintaan muat naik, di mana jenis adalah semasa menghantar request Bahagian sempadan Jenis Kandungan ialah rentetan rawak yang memisahkan data.

uni.request({
kaedah: "POST",
url: "http://localhost/upload.php",
pengepala: {

"Content-Type": "multipart/form-data; boundary=" + Math.random().toString().substr(2),

},
data: formData,
kejayaan: (res) => {

console.log("upload success", res.data);

},
gagal: (ralat) => 🎜>

},

console.log("upload fail", error);

});

Tukar nama kunci fail yang dimuat naik

2. Di sisi pelanggan, kami menambahkan fail melalui borang data Senarai ini dihimpunkan ke dalam formData. Pada masa ini, kunci setiap fail lalai kepada kedudukannya dalam formData, iaitu bilangan yang semakin meningkat bermula daripada 0. Kunci yang diterima oleh pelayan mungkin merupakan nilai

yang dinyatakan dalam komponen muat naik Oleh itu, apabila memuat naik fail, anda boleh menentukan nama kunci untuk setiap fail, seperti berikut:

namethis.fileList.forEach(. (item , index) => {

formData.append("file" + index, item.path);

});

Kerana

di sini berbeza daripada Nilai atribut, jadi ia juga harus diubah suai dengan sewajarnya semasa pemprosesan bahagian belakang.

fileforeach($_FILES sebagai $file) {name $tmp_name = $file["tmp_name"];

$name = $file["name"];

if (move_uploaded_file( $tmp_name, $upload_dir . $name)) {


} lain {

echo "upload success ";

}

}

echo "upload fail ";

Versi PHP yang lebih tinggi diperlukan Tambah parameter dan ubah suai php.ini

3. Untuk versi PHP yang lebih tinggi, anda perlu menambah parameter berikut dalam fail
:

post_max_size=20M php.iniupload_max_filesize =20J

max_execution_time =600

max_input_time=600

Selepas tetapan selesai, anda perlu memulakan semula Apache untuk berkuat kuasa.

4. Ringkasan

Artikel ini membincangkan masalah bahawa maklumat imej yang dihantar semasa memuat naik berbilang imej dalam uniapp tidak boleh diterima oleh PHP Dengan mengubah suai maklumat pengepala permintaan, menukar nama kunci fail yang dimuat naik dan mengkonfigurasi fail PHP .ini, dsb., berjaya menyelesaikan masalah. Akhir sekali, adalah disyorkan bahawa pembangun web memberi perhatian untuk menguji fungsi muat naik secara berkesan apabila menggunakan uniapp untuk pembangunan aplikasi mudah alih untuk mengurangkan ralat dan kerugian yang tidak perlu.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah bahawa php tidak boleh menerima pelbagai muat naik imej dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!