java前端上传图片到后端 formData fileItem

原创

mob64ca12e2ba6f 2024-04-08 05:33:50 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e2ba6f的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何实现Java前端上传图片到后端formData fileItem

一、整体流程

首先，我们需要了解该过程的整体流程。下面是一个简单的步骤表格：

erDiagram
    Process --|> Step1: 前端页面准备
    Process --|> Step2: 前端上传图片
    Process --|> Step3: 后端接收图片

二、具体步骤和代码示例

Step 1: 前端页面准备

在前端页面中，需要准备一个文件上传的input框。

<input type="file" id="fileInput">
<button onclick="uploadImage()">Upload Image</button>

Step 2: 前端上传图片

在前端，我们需要编写一个JavaScript函数来处理文件上传，并将文件数据封装成formData格式。

function uploadImage() {
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    
    var formData = new FormData();
    formData.append('file', file);
    
    // 使用fetch API将数据发送到后端
    fetch('/upload', {
        method: 'POST',
        body: formData
    }).then(response => {
        console.log('Image uploaded successfully');
    }).catch(error => {
        console.error('Error uploading image');
    });
}

Step 3: 后端接收图片

在后端，我们需要编写Java代码来接收前端传递的图片数据。

import javax.servlet.http.Part;
    
@WebServlet("/upload")
@MultipartConfig
public class FileUploadServlet extends HttpServlet {
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Part filePart = request.getPart("file"); // 从请求中获取文件部分
        
        // 将文件数据保存到服务器本地
        InputStream fileContent = filePart.getInputStream();
        Files.copy(fileContent, Paths.get("upload-dir", filePart.getSubmittedFileName()));
        
        response.getWriter().write("Image uploaded successfully");
    }
}