Comment résoudre le problème selon lequel PHP ne peut pas accepter plusieurs téléchargements d'images dans Uniapp-uni-app-php.cn

1. Introduction générale

Avec le développement continu de la technologie Internet, de plus en plus d'applications Web doivent prendre en charge la fonction de téléchargement d'images. Uniapp est un framework de développement mobile très populaire, multiplateforme, efficace et facile à utiliser. Cependant, lorsque nous utilisons uniapp pour développer la fonction de téléchargement multi-images, nous rencontrerons certains problèmes : le serveur ne peut pas recevoir correctement la requête et ne peut pas obtenir les informations sur l'image transmises. Cet article explorera les causes possibles et les solutions à ce problème.

2. Description du problème

Nous utilisons le plug-in du composant de téléchargement uni-upload fourni par uniapp pour développer la fonction de téléchargement multi-images, et utilisons le code back-end PHP pour recevoir les demandes de téléchargement et enregistrer les informations sur l'image. Le code de la page de téléchargement est le suivant : 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>

Copier après la connexion

上传组件采用了 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 ";
    }
  }
?>

Copier après la connexion

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

三、问题原因

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

四、解决方案

更改请求头信息

在上传请求中增加头部内容 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),

Copier après la connexion

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

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

Copier après la connexion

},
fail: (error) => {

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

Copier après la connexion

},
});

更改上传文件的 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 ";

Copier après la connexion

} else {

echo "upload fail ";

Copier après la connexion

}
}

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

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

Le composant de téléchargement utilise le plug-in uni-upload, appelle l'album pour sélectionner les images via la méthode chooseImage et modifie le tempFilePaths Remplissez le chemin de l'image dans fileList et téléchargez le chemin de l'image dans fileList sur le serveur principal dans le submit méthode.

Côté serveur, nous utilisons PHP comme langage backend, et le code est le suivant :
rrreee
Il a été constaté lors du test local qu'après avoir soumis l'image, le serveur backend n'a pas pu lire correctement la demande de téléchargement et a pu n'enregistre pas l'image correctement. Quelques solutions seront proposées ci-dessous.

3. Cause du problème

Selon le message d'erreur, cela peut être dû à une méthode de téléchargement de fichier incorrecte. FormData et multipart/form-data sont désormais un moyen important d'implémenter le téléchargement de fichiers via des formulaires. Cependant, si les informations d'en-tête de requête appropriées ne sont pas définies, le serveur ne peut pas obtenir correctement le fichier téléchargé, ce qui peut être la cause de ce problème.

4. Solution

Modifiez les informations d'en-tête de la demande

🎜Ajoutez le type de contenu de l'en-tête et la limite à la demande de téléchargement, où type est le type de contenu lors de l'envoi de la demande, et les parties limites sont des chaînes aléatoires qui divisent les données. 🎜🎜uni.request({🎜 méthode : "POST",🎜 url : "http://localhost/upload.php",🎜 en-tête : {🎜rrreee🎜},🎜 données : formData,🎜 succès : (res) = > {🎜rrreee🎜},🎜 échec : (erreur) => {🎜rrreee🎜},🎜});🎜