一、背景介绍
随着互联网技术的不断发展，越来越多的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接受不到怎么解决的详细内容。