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 是现在用来表单实现文件上传的一种重要方式，但是如果不设置合适的请求头信息，服务器无法正确获取上传文件，这可能是造成这个问题的原因。
四、解决方案
在上传请求中增加头部内容 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);},
});
在客户端，我们通过表单数据 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.inirrreee
uni-upload 플러그인을 사용하고 앨범을 호출하여 chooseImage 메소드를 통해 사진을 선택하고 변경합니다. tempFilePaths fileList에 이미지 경로를 입력하고 submit에서 <code>fileList에 있는 이미지 경로를 백엔드 서버에 업로드합니다. 메소드.
서버측에서는 PHP를 백엔드 언어로 사용하고 있으며 코드는 다음과 같습니다.
rrreee
로컬 테스트에서 이미지 제출 후 백엔드 서버가 업로드 요청을 제대로 읽지 못하고 이미지를 올바르게 저장하지 마세요. 몇 가지 솔루션이 아래에 제안됩니다.
3. 문제의 원인
오류 메시지에 따르면 잘못된 파일 업로드 방식으로 인해 발생할 수 있습니다. FormData 및 multipart/form-data는 이제 양식을 통해 파일 업로드를 구현하는 중요한 방법입니다. 그러나 적절한 요청 헤더 정보가 설정되지 않으면 서버가 업로드된 파일을 올바르게 얻을 수 없으며 이것이 이 문제의 원인일 수 있습니다.
4. 솔루션
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🎜}🎜}🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
