if (!empty($_FILES)) { // 处理上传文件 $uploadedFiles = array(); foreach ($_FILES as $file) { if ($file['error'] === 0) { $tempName = $file['tmp_name']; $fileName = $file['name']; $destination = 'productimg/'.$fileName; move_uploaded_file($tempName, $destination); $uploadedFiles[] = $fileName; } } // 将上传文件路径保存到数据库 foreach ($uploadedFiles as $file) { $sql = "UPDATE zhenggong set jpg = '$file' WHERE id=$id"; $count = execute_sql($sql); } if($count>0){ echo json_encode(array("status"=>200,"msg"=>"图片修改成功","sql"=>$sql,"sad"=>$_FILES,"fsdf"=>$uploadedFiles)); }else{ echo json_encode(array("status"=>500,"msg"=>"图片修改失败","sql"=>$sql)); } }这段代码能不能实现多图片上传
时间: 2024-04-28 17:20:29 浏览: 102
这段代码可以实现多图片上传,因为它使用了循环处理上传的每一个文件,并且将文件保存到服务器指定目录中。
具体来说,当上传的文件不为空时,代码会对每一个上传的文件进行处理。对于每一个上传的文件,它会先判断文件是否上传成功(即 error 是否为 0),如果成功则将文件从临时目录移动到指定的上传目录中,并将文件名保存到一个数组中。最后,将上传成功的文件信息更新到数据库中。
因此,如果你在前端页面上选择了多个文件进行上传,这段代码就会循环处理每一个文件,最终实现多图片上传的功能。
相关问题
<script setup> import VueUploadComponent from "vue-upload-component"; import { upload } from "@/api/conf"; const isUploading = ref(false); const allowedExtensions = ref(["jpg", "jpeg", "png", "gif"]); const maxFileSize = ref(10 * 1024 * 1024); const uploadedFiles = ref([]); function handleInputFilter(uploadData) { // 文件过滤器 if (uploadData.file.type.indexOf("image/") !== 0) { return Promise.reject("只能上传图片文件"); } return Promise.resolve(uploadData); } function handleBeforeUpload(uploadData) { // 开始上传前的回调 this.isUploading = true; return uploadData; } function handleUploading(uploadData) { console.log("uploading", uploadData.progress); } function handleUploadSuccess(uploadData) { console.log("success", uploadData.url); this.uploadedFiles.push({ id: uploadData.response.id, name: uploadData.file.name, size: uploadData.file.size, url: uploadData.response.url, }); this.isUploading = false; } function handleUploadError(uploadData) { console.error("error", uploadData.error); this.isUploading = false; } function fileSize(size) { if (size < 1024) { return size + "B"; } else if (size < 1024 * 1024) { return (size / 1024).toFixed(2) + "KB"; } else { return (size / 1024 / 1024).toFixed(2) + "MB"; } } function deleteFile(index) { this.uploadedFiles.splice(index, 1); } </script> <template> <div> <vue-upload-component :http-client="upload" :multiple="true" :accept="'image/*'" :extensions="allowedExtensions" :maxSize="maxFileSize" @input-filter="handleInputFilter" @before-upload="handleBeforeUpload" @uploading="handleUploading" @upload-success="handleUploadSuccess" @upload-error="handleUploadError" > <template v-slot:default> <div class="upload-area"> <div v-if="!isUploading"> <i class="iconfont icon-add"></i> <span class="text">点击上传</span> </div> <div v-else> <i class="iconfont icon-loading"></i> <span class="text">上传中...</span> </div> </div> </template> </vue-upload-component> <div class="preview-area"> <div v-for="(file, index) in uploadedFiles" :key="file.id"> <img :src="file.url" class="preview-image" /> <div class="preview-name">{{ file.name }}</div> <div class="preview-size">{{ fileSize(file.size) }}</div> <div class="preview-delete" @click="deleteFile(index)">删除</div> </div> </div> </div> </template> 优化一下
首先,可以将一些处理函数和变量移出 `setup`,放到 `data()` 或 `methods` 中,以便更好地组织代码。同时,可以使用 `computed` 来计算文件大小,使得代码更加简洁。另外,可以将上传成功后的文件信息作为一个对象,而不是多个独立的属性,这样可以更好地管理文件信息。
修改后的代码如下:
```
<template>
<div>
<vue-upload-component
:http-client="upload"
:multiple="true"
:accept="'image/*'"
:extensions="allowedExtensions"
:maxSize="maxFileSize"
@input-filter="handleInputFilter"
@before-upload="handleBeforeUpload"
@uploading="handleUploading"
@upload-success="handleUploadSuccess"
@upload-error="handleUploadError"
>
<template v-slot:default>
<div class="upload-area">
<div v-if="!isUploading">
<i class="iconfont icon-add"></i>
<span class="text">点击上传</span>
</div>
<div v-else>
<i class="iconfont icon-loading"></i>
<span class="text">上传中...</span>
</div>
</div>
</template>
</vue-upload-component>
<div class="preview-area">
<div v-for="(file, index) in uploadedFiles" :key="file.id">
<img :src="file.url" class="preview-image" />
<div class="preview-info">
<div class="preview-name">{{ file.name }}</div>
<div class="preview-size">{{ fileSize(file.size) }}</div>
<div class="preview-delete" @click="deleteFile(index)">删除</div>
</div>
</div>
</div>
</div>
</template>
<script>
import VueUploadComponent from "vue-upload-component";
import { upload } from "@/api/conf";
export default {
components: {
VueUploadComponent,
},
data() {
return {
isUploading: false,
allowedExtensions: ["jpg", "jpeg", "png", "gif"],
maxFileSize: 10 * 1024 * 1024,
uploadedFiles: [],
};
},
computed: {
fileSize() {
return function(size) {
if (size < 1024) {
return size + "B";
} else if (size < 1024 * 1024) {
return (size / 1024).toFixed(2) + "KB";
} else {
return (size / 1024 / 1024).toFixed(2) + "MB";
}
};
},
},
methods: {
handleInputFilter(uploadData) {
// 文件过滤器
if (uploadData.file.type.indexOf("image/") !== 0) {
return Promise.reject("只能上传图片文件");
}
return Promise.resolve(uploadData);
},
handleBeforeUpload(uploadData) {
// 开始上传前的回调
this.isUploading = true;
return uploadData;
},
handleUploading(uploadData) {
console.log("uploading", uploadData.progress);
},
handleUploadSuccess(uploadData) {
console.log("success", uploadData.url);
const file = {
id: uploadData.response.id,
name: uploadData.file.name,
size: uploadData.file.size,
url: uploadData.response.url,
};
this.uploadedFiles.push(file);
this.isUploading = false;
},
handleUploadError(uploadData) {
console.error("error", uploadData.error);
this.isUploading = false;
},
deleteFile(index) {
this.uploadedFiles.splice(index, 1);
},
},
};
</script>
```
<template> <div> <vue-upload-component :http="http" :multiple="true" :action="uploadUrl" :headers="headers" :accept="'image/*'" :extensions="allowedExtensions" :maxSize="maxFileSize" @input-filter="handleInputFilter" @before-upload="handleBeforeUpload" @uploading="handleUploading" @upload-success="handleUploadSuccess" @upload-error="handleUploadError" > <template v-slot:default> <div class="upload-area"> <div v-if="!isUploading"> <i class="iconfont icon-add"></i> <span class="text">点击上传</span> </div> <div v-else> <i class="iconfont icon-loading"></i> <span class="text">上传中...</span> </div> </div> </template> </vue-upload-component> <div class="preview-area"> <div v-for="(file, index) in uploadedFiles" :key="file.id"> <img :src="file.url" class="preview-image" /> <div class="preview-info"> <div class="preview-name">{{ file.name }}</div> <div class="preview-size">{{ fileSize(file.size) }}</div> <div class="preview-delete" @click="deleteFile(index)">删除</div> </div> </div> </div> </div> </template> <script> import VueUploadComponent from "vue-upload-component"; import request from '@/utils/request'; export default { components: { VueUploadComponent}, data() { return { http: request, uploadUrl: "/api/upload/plupload_task", headers: { 'Content-Type': 'multipart/form-data' }, // 请求头 isUploading: false, allowedExtensions: ["jpg", "jpeg", "png", "gif"], maxFileSize: 10 * 1024 * 1024, uploadedFiles: [], }; }, computed: { fileSize() { return function (size) { if (size < 1024) { return size + "B"; } else if (size < 1024 * 1024) { return (size / 1024).toFixed(2) + "KB"; } else { return (size / 1024 / 1024).toFixed(2) + "MB"; } }; }, }, methods: { handleInputFilter(uploadData) { if (uploadData.file.type.indexOf("image/") !== 0) { return Promise.reject("只能上传图片文件"); } return Promise.resolve(uploadData); }, handleBeforeUpload(uploadData) { this.isUploading = true; return uploadData; }, handleUploading(uploadData) { console.log("uploading", uploadData.progress); }, handleUploadSuccess(uploadData) { console.log("success", uploadData.url); const file = { id: uploadData.response.id, name: uploadData.file.name, size: uploadData.file.size, url: uploadData.response.url, }; this.uploadedFiles.push(file); this.isUploading = false; }, handleUploadError(uploadData) { console.error("error", uploadData.error); this.isUploading = false; }, deleteFile(index) { this.uploadedFiles.splice(index, 1); }, }, }; </script> 这段代码,为什么在选择文件后没反应了
根据代码,可能有以下几个原因导致选择文件后没有反应:
1. 检查浏览器是否支持 File API,因为该组件是基于 File API 开发的,如果浏览器不支持 File API,那么选择文件后就不会有反应。
2. 检查上传路径是否正确,因为上传路径是通过 `uploadUrl` 属性设置的,如果设置的路径不正确,那么选择文件后就无法上传。
3. 检查上传文件的大小和格式是否符合要求,因为在 `handleInputFilter` 方法中限制了上传文件的格式和大小,如果选择的文件不符合要求,那么就不会上传。
4. 检查服务器是否正常工作,因为上传文件需要与服务器进行交互,如果服务器出现问题,那么就无法上传文件。
阅读全文