首頁 > web前端 > uni-app > 主體

uniapp多圖上傳php接受不到怎麼解決

PHPz
發布: 2023-04-18 18:24:53
原創
1006 人瀏覽過

一、背景介紹

隨著網路科技的不斷發展,越來越多的網路應用程式需要支援圖片上傳功能。而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 是現在用來表單實現文件上傳的一種重要方式,但是如果不設置合適的請求頭信息,伺服器無法正確獲取上傳文件,這可能是造成這個問題的原因。

四、解決方案

  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);
登入後複製

} ,
});

  1. 更改上傳檔案的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接受不到怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!