uniapp에서 PHP가 여러 이미지 업로드를 허용하지 않는 문제를 해결하는 방법

1. 배경 소개

인터넷 기술의 지속적인 발전으로 인해 점점 더 많은 웹 애플리케이션에서 이미지 업로드 기능을 지원해야 합니다. Uniapp은 크로스 플랫폼이고 효율적이며 사용하기 쉬운 매우 인기 있는 모바일 개발 프레임워크입니다. 그러나 uniapp을 사용하여 다중 이미지 업로드 기능을 개발할 때 몇 가지 문제에 직면하게 됩니다. 서버가 요청을 올바르게 수신할 수 없고 전달된 이미지 정보를 얻을 수 없습니다. 이 문서에서는 이 문제의 가능한 원인과 해결 방법을 살펴보겠습니다.

2. 문제 설명

uniapp에서 제공하는 업로드 컴포넌트 플러그인 uni-upload를 사용하여 다중 이미지 업로드 기능을 개발하고, 업로드 요청을 수신하기 위해 PHP 백엔드 코드를 사용하고 이미지 정보를 저장합니다. 업로드 페이지 코드는 다음과 같습니다. 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

업로드 구성 요소는 uni-upload 플러그인을 사용하고 앨범을 호출하여 chooseImage 메소드를 통해 사진을 선택하고 변경합니다. tempFilePaths fileList에 이미지 경로를 입력하고 submit에서 <code>fileList에 있는 이미지 경로를 백엔드 서버에 업로드합니다. 메소드.

서버측에서는 PHP를 백엔드 언어로 사용하고 있으며 코드는 다음과 같습니다.
rrreee
로컬 테스트에서 이미지 제출 후 백엔드 서버가 업로드 요청을 제대로 읽지 못하고 이미지를 올바르게 저장하지 마세요. 몇 가지 솔루션이 아래에 제안됩니다.

3. 문제의 원인

오류 메시지에 따르면 잘못된 파일 업로드 방식으로 인해 발생할 수 있습니다. FormData 및 multipart/form-data는 이제 양식을 통해 파일 업로드를 구현하는 중요한 방법입니다. 그러나 적절한 요청 헤더 정보가 설정되지 않으면 서버가 업로드된 파일을 올바르게 얻을 수 없으며 이것이 이 문제의 원인일 수 있습니다.

4. 솔루션

1. 요청 헤더 정보 변경

🎜업로드 요청에 헤더 콘텐츠 유형과 경계를 추가합니다. 여기서 유형은 요청을 보낼 때 Content-Type입니다. 경계 부분은 데이터를 분할하는 임의의 문자열입니다. 🎜🎜uni.request({🎜 메소드: "POST",🎜 url: "http://localhost/upload.php",🎜 헤더: {🎜rrreee🎜},🎜 데이터: formData,🎜 성공: (res) = > {🎜rrreee🎜},🎜 실패: (오류) => {🎜rrreee🎜},🎜});🎜

2. 업로드된 파일의 키 이름 변경
🎜클라이언트 측에서는 양식 데이터 추가를 통해 파일 목록을 formData로 조합합니다. 이때, 각 파일의 키는 기본적으로 formData의 위치로 설정되어 있으며, 0부터 시작하여 숫자가 증가합니다. 서버가 수신한 키는 업로드 구성 요소에 지정된 name 값일 수 있습니다. 따라서 파일을 업로드할 때 다음과 같이 각 파일에 대한 키 이름을 지정할 수 있습니다. ((( item, index) => {🎜 formData.append("file" + index, item.path);🎜});🎜🎜여기의 파일은 와 다르기 때문입니다 >업로드 구성 요소 이름 속성 값이므로 백엔드 처리 중에도 적절하게 수정해야 합니다. 🎜🎜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. PHP 상위 버전의 경우 매개변수 추가 및 php.ini 수정이 필요합니다.
🎜 더 높은 버전의 PHP의 경우 php.ini 파일에 다음 매개변수를 추가해야 합니다. 🎜🎜post_max_size=20M 🎜upload_max_filesize=20M 🎜max_execution_time=600 🎜max_input_time=600🎜🎜설정이 완료된 후 , 적용하려면 Apache를 다시 시작해야 합니다. 🎜🎜4. 요약🎜🎜 유니앱에서 여러 이미지를 업로드할 때 전송되는 이미지 정보를 PHP에서 수신할 수 없는 문제에 대해 설명합니다. 요청 헤더 정보를 수정하고 업로드된 파일의 키 이름을 변경하고 구성하면 성공적으로 해결됩니다. php.ini 파일 문제입니다. 마지막으로, 불필요한 오류와 손실을 줄이기 위해 웹 개발자는 모바일 애플리케이션 개발을 위해 uniapp을 사용할 때 업로드 기능을 효과적으로 테스트하는 데 주의할 것을 권장합니다. 🎜

위 내용은 uniapp에서 PHP가 여러 이미지 업로드를 허용하지 않는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!