uniapp多图上传php接受不到怎么解决

2023-05-14 22:05:37 646人浏览泡泡鱼

摘要

一、背景介绍随着互联网技术的不断发展，越来越多的WEB应用需要支持图片上传功能。而uniapp是一款目前非常流行的移动端开发框架，具有跨平台、高效、易用等特点。然而，当我们使用uniapp开发多图上传功能时，就会遇到一些问题：服务器无法正确

一、背景介绍

随着互联网技术的不断发展，越来越多的WEB应用需要支持图片上传功能。而uniapp是一款目前非常流行的移动端开发框架，具有跨平台、高效、易用等特点。然而，当我们使用uniapp开发多图上传功能时，就会遇到一些问题：服务器无法正确接收请求，无法获取到传递的图片信息。本文将探讨这个问题的可能原因和解决方案。

二、问题描述

我们使用uniapp提供的上传组件插件 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 是现在用来表单实现文件上传的一种重要方式，但是如果不设置合适的请求头信息，服务器无法正确获取上传文件，这可能是造成这个问题的原因。

四、解决方案

更改请求头信息

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

},
});

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

}
}

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

对于高版本 PHP，需要在 php.ini 文件中增加以下参数：

post_max_size=20M
upload_max_filesize=20M
max_execution_time=600
max_input_time=600

设置完毕后，需要重启 Apache 才能生效。

四、总结

本篇文章探讨了 uniapp 多图上传时传递图片信息无法被 PHP 接收的问题，通过修改请求头信息、更改上传文件的 key 名称和配置 php.ini 文件等方式，成功解决了问题。最后，建议 Web 开发者在使用 uniapp 进行移动端应用开发中，要注意对上传功能进行有效的测试，减少不必要的错误和损失。

以上就是uniapp多图上传php接受不到怎么解决的详细内容，更多请关注编程网其它相关文章！

您可能感兴趣的文档:

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: uniapp多图上传php接受不到怎么解决

本文链接: https://www.lsjlt.com/news/207602.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341