引言

前端实现

1. 准备工作

在Vue.js项目中，我们通常会使用Element UI或Ant Design Vue等UI框架来简化开发。以下以Element UI为例进行说明。

(1) 安装Element UI

npm install element-ui --save

(2) 引入Element UI

在你的Vue项目中的入口文件（如main.js）中引入Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 添加图片上传组件

(1) 使用Element UI的el-upload组件

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-upload="beforeUpload"
    multiple
    :limit="3"
    :on-exceed="handleExceed"
  >
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

(2) 事件处理

  • handlePreview: 预览图片
  • handleRemove: 移除图片
  • beforeUpload: 上传前的处理，例如文件格式和大小验证
  • handleExceed: 文件数量超过时的处理

3. 前端代码示例

export default {
  methods: {
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      const isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJPGPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
        return false;
      }
      const isLt500KB = file.size / 1024 / 1024 < 0.5;
      if (!isLt500KB) {
        this.$message.error('上传图片大小不能超过 500KB!');
        return false;
      }
      return true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传 3 张图片!`);
    }
  }
};

后端实现

1. PHP后端处理

(1) 接收上传的图片

在PHP中，你可以通过$_FILES全局数组接收上传的文件信息。

if (isset($_FILES['file'])) {
  $file = $_FILES['file'];
  // ... 处理图片
}

(2) 图片处理

move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name']);

(3) 返回结果

处理完成后，你需要返回一个结果给前端，通常是一个JSON对象。

echo json_encode(['status' => 'success', 'message' => '图片上传成功']);

4. 后端代码示例

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  if (isset($_FILES['file'])) {
    $file = $_FILES['file'];
    $uploadDir = 'uploads/';
    $newFileName = uniqid() . '.' . pathinfo($file['name'], PATHINFO_EXTENSION);
    move_uploaded_file($file['tmp_name'], $uploadDir . $newFileName);

    echo json_encode(['status' => 'success', 'message' => '图片上传成功', 'url' => $uploadDir . $newFileName]);
  } else {
    echo json_encode(['status' => 'error', 'message' => '没有文件被上传']);
  }
}

总结