利用Servlet，vue实现一个请假信息管理系统图片

要使用Servlet配合Vue实现一个请假信息管理系统的图片上传功能，你需要先设置后端（Servlet）处理文件上传，然后在前端（Vue）负责用户界面交互和显示。这里我会简要概述一下步骤：

1. **后端（Servlet）**:
- 创建一个Servlet，如`LeaveRequestServlet`，用于接收HTTP POST请求，其中包含文件数据。
- 使用`javax.servlet.multipart.MultipartConfigElement`配置支持文件上传。
- 用`ServletOutputStream`保存上传的图片到服务器目录。
- 返回响应，例如JSON，包含文件操作的状态和可能的URL。

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;

public class LeaveRequestServlet extends HttpServlet {
    // ... (添加MultipartConfigElement配置)
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 检查请求是否为multipart/form-data
        MultipartConfigFactory factory = new MultipartConfigFactory();
        MultipartConfig config = factory.createMultipartConfig();

        try (FileItemFactory factoryItem = new StandardFileItemFactory(config);
             List<FileItem> items =(factoryItem.createItemStream(request.getInputStream(), "UTF-8").get()) {
            for (FileItem item : items) {
                if (!item.isFormField() && !item.getName().isEmpty()) {
                    File uploadedFile = item.write(temporaryFile());
                    // Save file to a specific directory or database
                    // ...
                    response.getWriter().write("File uploaded successfully");
                }
            }
        } catch (Exception e) {
            // Handle errors
        }
    }

    private File temporaryFile() throws IOException {
        File tempDir = getServletContext().getRealPath("/WEB-INF/upload/");
        return File.createTempFile("uploaded-", ".jpg", tempDir);
    }
}

2. **前端（Vue）**:
- 使用`axios`或`fetch`等库从后端获取文件状态和路径。
- 建立一个表单组件，允许用户选择图片并提交。
- 使用`v-model`绑定`FormData`实例，以便发送POST请求时包含图片数据。

<template>
  <div>
    <input type="file" @change="uploadImage($event)" />
    <p v-if="imageUrl">Uploaded image URL: {{ imageUrl }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
    };
  },
  methods: {
    uploadImage(event) {
      const formData = new FormData();
      formData.append('image', event.target.files[0]);

      axios.post('/leave-request', formData, { headers: {'Content-Type': 'multipart/form-data'} })
        .then(response => {
          this.imageUrl = response.data.fileUrl; // Assuming the server returns the image URL
        })
        .catch(error => console.error(error));
    },
  },
};
</script>