uniappでPHPが複数の画像アップロードを受け付けられない問題を解決する方法

1. 背景の紹介

インターネット技術の継続的な発展に伴い、ますます多くの Web アプリケーションが画像アップロード機能をサポートする必要があります。 Uniapp は、クロスプラットフォームで効率的で使いやすい、非常に人気のあるモバイル開発フレームワークです。しかし、uniappを使って複数画像アップロード機能を開発すると、サーバーがリクエストを正しく受信できず、渡された画像情報を取得できないという問題が発生します。この記事では、この問題の考えられる原因と解決策を検討します。

2. 問題の説明

uniappuni-upload が提供するアップロード コンポーネント プラグインを使用して、複数画像アップロード機能を開発し、PHP バックエンドを使用します。アップロードリクエストを受信し、画像情報を保存するコード。アップロード ページのコードは次のとおりです。

<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>

アップロード コンポーネントは uni-upload プラグインを使用し、アルバムを呼び出して chooseImage メソッドを通じて写真を選択します。 tempFilePaths を追加して、fileList の画像パスを入力し、fileList の画像パスを submit## のバックエンド サーバーにアップロードします。 ＃ 方法。

サーバー側では、バックエンド言語として PHP を使用します。コードは次のとおりです。

<?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 ";
    }
  }
?>

画像を送信した後、ローカル テストで判明したのは、エンドサーバーはアップロードリクエストを正しく読み取れず、画像を正しく保存できませんでした。いくつかの解決策を以下に提案します。

3. 問題の原因

エラー メッセージによると、ファイルのアップロード方法が間違っていることが原因である可能性があります。 FormData と multipart/form-data は、フォームを介したファイル アップロードを実装するための重要な方法になりましたが、適切なリクエスト ヘッダー情報が設定されていない場合、サーバーはアップロードされたファイルを正しく取得できず、それがこの問題の原因である可能性があります。

4. 解決策

リクエスト ヘッダー情報を変更します

アップロード リクエストにヘッダーのコンテンツ タイプと境界を追加します。タイプは送信時のタイプです。 request Content-Type の境界部分は、データを分割するランダムな文字列です。

uni.request({

メソッド: "POST",
URL: "http://localhost/upload.php",
ヘッダー: {

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

},

データ: formData,
成功: (res) => {

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

},

失敗: (error) => {

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

} ,

});

アップロードされたファイルのキー名を変更します

クライアントでは、フォーム データの追加を通じてファイル リストを formData に組み立てます。このとき、各ファイルのキーはデフォルトで formData 内の位置に設定され、0 から始まる増加する番号になります。サーバーが受信したキーは、アップロード コンポーネントで指定された

name 値である可能性があるため、ファイルをアップロードするときに、次のように各ファイルのキー名を指定できます:

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

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

file# のため## ここでは、アップロードされたコンポーネントの name 属性値とは異なるため、バックエンド処理中にもそれに応じて変更する必要があります。 foreach($_FILES as $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 ";

}

}

PHP の上位バージョンではパラメータを追加する必要がありますphp .ini

3. PHP の上位バージョンの場合は、次のパラメータを

php.ini

ファイルに追加する必要があります: post_max_size=20M

upload_max_filesize=20M

max_execution_time=600
max_input_time=600

設定が完了したら、Apache を再起動して有効にする必要があります。

4. まとめ

この記事では、uniappで複数の画像をアップロードする際に送信される画像情報がPHPで受信できない問題について、リクエストヘッダー情報を修正し、キー名を変更することで解決します。ファイルをアップロードし、PHP .ini ファイルを設定するなどして、問題は正常に解決されました。最後に、Web 開発者は、不必要なエラーや損失を減らすために、モバイル アプリケーション開発に uniapp を使用する場合、アップロード機能の効果的なテストに注意を払うことをお勧めします。

以上がuniappでPHPが複数の画像アップロードを受け付けられない問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。