So lösen Sie das Problem, dass PHP in Uniapp nicht mehrere Bild-Uploads akzeptieren kann

1. Hintergrundeinführung

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie müssen immer mehr Webanwendungen die Funktion zum Hochladen von Bildern unterstützen. Uniapp ist ein sehr beliebtes mobiles Entwicklungsframework, das plattformübergreifend, effizient und einfach zu verwenden ist. Wenn wir jedoch uniapp verwenden, um die Funktion zum Hochladen mehrerer Bilder zu entwickeln, treten einige Probleme auf: Der Server kann die Anforderung nicht korrekt empfangen und die übergebenen Bildinformationen nicht abrufen. In diesem Artikel werden mögliche Ursachen und Lösungen für dieses Problem untersucht.

2. Problembeschreibung

Wir verwenden das von uniapp bereitgestellte Upload-Komponenten-Plug-in uni-upload, um die Funktion zum Hochladen mehrerer Bilder zu entwickeln, und verwenden PHP-Back-End-Code, um Upload-Anfragen zu empfangen Bildinformationen speichern. Der Code der Upload-Seite lautet wie folgt: uni-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 中，同时在submit 方法中将 fileList 中的图片路径上传到后端服务器。

在服务器端，我们使用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 ";
    }
  }
?>

在本地测试中发现，在提交图片后，后端服务器无法正确读取上传请求，不能正确地保存图片。下面将会会提出一些解决方案。

三、问题原因

根据错误提示，可能是文件上传方式不正确导致的。而 FormData 和 multipart/form-data 是现在用来表单实现文件上传的一种重要方式，但是如果不设置合适的请求头信息，服务器无法正确获取上传文件，这可能是造成这个问题的原因。

四、解决方案

1. 更改请求头信息

在上传请求中增加头部内容 type 与 boundary ，其中 type 是发送请求时的 Content-Type， boundary 部分是分割数据的随机字符串。

uni.request({
 method: "POST",
 url: "http://localhost/upload.php",
 header: {

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

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

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

},
 fail: (error) => {

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

},
});

2. 更改上传文件的 key 名称

在客户端，我们通过表单数据 append 的方式将文件列表拼装成 formData 。此时，每个文件的 key 默认是它在 formData 中的位置，即从 0 开始的递增数字。而服务器接收到的 key 可能是上传组件里面指定的 name 值，因此，在上传文件时可以为每个文件指定一个 key 名称，如下：

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

}
}

3. 高版本 PHP 需要增加参数修改 php.ini

对于高版本 PHP，需要在 php.inirrreee

Die Upload-Komponente verwendet das Plug-in uni-upload, ruft das Album auf, um Bilder über die Methode chooseImage auszuwählen, und ändert sie Geben Sie in den tempFilePaths den Bildpfad in fileList ein und laden Sie den Bildpfad in fileList im submit auf den Back-End-Server hoch -Methode.

Auf der Serverseite verwenden wir PHP als Backend-Sprache und der Code lautet wie folgt:
rrreee
Beim lokalen Test wurde festgestellt, dass der Backend-Server nach dem Absenden des Bildes die Upload-Anfrage nicht korrekt lesen konnte und konnte Das Bild wurde nicht korrekt gespeichert. Im Folgenden werden einige Lösungen vorgeschlagen.

3. Ursache des Problems

Laut Fehlermeldung kann es an einer falschen Datei-Upload-Methode liegen. FormData und Multipart/Form-Data sind mittlerweile eine wichtige Möglichkeit, das Hochladen von Dateien über Formulare zu implementieren. Wenn jedoch die entsprechenden Anforderungsheader-Informationen nicht festgelegt sind, kann der Server die hochgeladene Datei nicht korrekt abrufen, was die Ursache für dieses Problem sein kann.

4. Lösung

1. Ändern Sie die Header-Informationen der Anfrage

🎜Fügen Sie den Header-Inhaltstyp und die Grenze zur Upload-Anfrage hinzu, wobei „Typ“ der Inhaltstyp beim Senden der Anfrage ist. und Grenzteile sind zufällige Zeichenfolgen, die die Daten aufteilen. 🎜🎜uni.request({🎜 Methode: „POST“,🎜 URL: „http://localhost/upload.php“,🎜 Header: {🎜rrreee🎜},🎜 Daten: formData,🎜 Erfolg: (res) = > {🎜rrreee🎜},🎜 fail: (error) => {🎜rrreee🎜},🎜});🎜

2. Ändern Sie den Schlüsselnamen der hochgeladenen Datei
🎜Auf der Clientseite stellen wir die Dateiliste durch Formulardatenanhängen zu formData zusammen. Zu diesem Zeitpunkt wird der Schlüssel jeder Datei standardmäßig auf seine Position in formData zurückgesetzt, bei der es sich um eine aufsteigende Zahl beginnend bei 0 handelt. Der vom Server empfangene Schlüssel kann der in der Upload-Komponente angegebene name-Wert sein. Daher können Sie beim Hochladen von Dateien wie folgt einen Schlüsselnamen für jede Datei angeben: 🎜🎜this.fileList.forEach ((( item, index) => {🎜 formData.append("file" + index, item.path);🎜});🎜🎜Da sich die Datei hier von der Name der Upload-Komponente Attributwert, daher sollte er auch während der Back-End-Verarbeitung entsprechend geändert werden. 🎜🎜foreach($_FILES as $file) {🎜 $tmp_name = $file["tmp_name"];🎜 $name = $file["name"];🎜 if (move_uploaded_file($tmp_name, $upload_dir . $name)) {🎜rrreee🎜} else {🎜rrreee🎜}🎜}🎜
3. Für höhere Versionen von PHP müssen Sie Parameter hinzufügen und php.ini ändern
🎜 Für höhere Versionen von PHP müssen Sie die folgenden Parameter zur Datei php.ini hinzufügen: 🎜🎜post_max_size=20M 🎜upload_max_filesize=20M 🎜max_execution_time=600 🎜max_input_time=600🎜🎜Nachdem die Einstellungen abgeschlossen sind , Apache muss neu gestartet werden, damit es wirksam wird. 🎜🎜4. Zusammenfassung🎜🎜In diesem Artikel wird das Problem erläutert, dass die beim Hochladen mehrerer Bilder in Uniapp übertragenen Bildinformationen nicht von PHP empfangen werden können. Es wird erfolgreich durch Ändern der Anforderungsheaderinformationen, Ändern des Schlüsselnamens der hochgeladenen Datei und Konfigurieren gelöst das Problem mit der php.ini-Datei. Abschließend wird Webentwicklern empfohlen, bei der Verwendung von Uniapp für die Entwicklung mobiler Anwendungen darauf zu achten, die Upload-Funktion effektiv zu testen, um unnötige Fehler und Verluste zu reduzieren. 🎜

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass PHP in Uniapp nicht mehrere Bild-Uploads akzeptieren kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!