vue+element+php同时上传多图片到服务器代码例子

以下是一个简单的示例代码，用于演示如何在Vue、Element UI和PHP中同时上传多个图片文件到服务器：

前端代码（Vue+Element UI）：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="http://example.com/upload.php"
      :headers="{ 'Content-Type': 'multipart/form-data' }"
      :multiple="true"
      :limit="3"
      :data="{ 'extra_param': 'example' }"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
      <el-button size="small" type="primary">Click to Upload</el-button>
      <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 2MB</div>
    </el-upload>
    <div v-for="(item, index) in fileList" :key="index">
      <img :src="item.url" class="preview-image">
      <el-button size="mini" @click="handleRemove(index)">Remove</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(`The files selected exceed the limit of ${this.limit}.`);
    },
    handleChange(file, fileList) {
      // Update the file list
      this.fileList = fileList;
    },
    handleRemove(index) {
      // Remove the file from the file list
      this.fileList.splice(index, 1);
    },
    beforeUpload(file) {
      // Add the file to the file list
      this.fileList.push(file);

      // Return false to prevent default upload behavior
      return false;
    },
    submitForm() {
      const formData = new FormData();

      // Add the selected files to the FormData object
      for (let i = 0; i < this.fileList.length; i++) {
        const file = this.fileList[i].raw;
        formData.append('files[]', file, file.name);
      }

      // Add any extra parameters to the FormData object
      formData.append('extra_param', 'example');

      // Send the formData object to the server using axios
      axios.post('http://example.com/upload.php', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }).then((response) => {
        console.log(response.data);
      }).catch((error) => {
        console.log(error);
      });
    },
  },
};
</script>

后端代码（PHP）：

<?php
// Get the uploaded files
$files = $_FILES['files'];

// Check if there are any files to upload
if (count($files['name']) === 0) {
  echo json_encode(['error' => 'No files selected.']);
  exit();
}

// Loop through each file and move it to the upload directory
$upload_dir = 'uploads/';
$uploaded_files = [];
for ($i = 0; $i < count($files['name']); $i++) {
  $name = $files['name'][$i];
  $type = $files['type'][$i];
  $tmp_name = $files['tmp_name'][$i];
  $error = $files['error'][$i];
  $size = $files['size'][$i];

  // Check if the file was uploaded successfully
  if ($error !== UPLOAD_ERR_OK) {
    echo json_encode(['error' => 'Error uploading file.']);
    exit();
  }

  // Move the file to the upload directory
  $uploaded_name = time() . '_' . $name;
  $uploaded_path = $upload_dir . $uploaded_name;
  if (move_uploaded_file($tmp_name, $uploaded_path)) {
    $uploaded_files[] = $uploaded_name;
  }
}

// Return the uploaded file names to the client
echo json_encode(['files' => $uploaded_files]);
?>

注意，这只是一个简单的示例，实际应用中还需要对文件类型、大小、上传数量等进行更加严格的校验和处理。