Ajax文件上传_vue 使用ajax文件上传-优快云博客

本文链接：https://blog.youkuaiyun.com/fengEQF/article/details/132537519

博客介绍了使用IntelliJ IDEA实现文件上传到指定路径并返回前端的方法。需用到idea json的jar包、tomcat、vue.js和jquery.js文件，掌握ajax、tomcat配置及虚拟路径等知识点，同时提醒部分代码路径需自行创建和更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要用到的idea json的jar包 tomcat vue.js文件 jquery.js文件

需要会的知识点：ajax tomcat的配置 tomcat虚拟路径

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/vue.js"></script>
    <script src="/jquery330.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <!--第一步 nsubmit="return false" 阻止form跳转 好让我们用ajax-->
            <form onsubmit="return false" id="xinForm">
                <input type="file" name="mypic" accept="image/*">
                <button @click="uploadBtn">点击上传</button>
            </form>
            <img :src="imgUrl" height="200px" width="200px">
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                imgUrl: ''
            },
            methods: {
                uploadBtn: function () {
                    //思路
                    // 1，获取form  需要form表单对象
                    var xinFormDom = document.getElementById("xinForm")
                    console.log(xinFormDom)
                    // 2，把这个 form 表单放进去
                    var formData = new FormData(xinFormDom);
                    console.log("formData是：", formData)
                    // 3，使用ajax上传
                    // var that = this
                    var that = this
                    $.ajax({
                        url: '/houtaidizhi',
                        type: 'post',
                        // contentType:false,
                        contentType: false,// 关闭
                        processData: false, // ajax传文件必须设置false
                        data: formData,//因为formData就是个对象 就是{K:V}
                        dataType: 'JSON',
                        success: function (res) {
                            that.imgUrl = res.data
                            if (res.code == 200) {
                                that.imgUrl = res.data
                                console.log(that.imgUrl)
                            }
                        }
                    })
                }
            },
        })
    </script>
</body>
</html>

page层

package com.xiexin.page;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "PageTestUploadServlet",value = "/admin/testUpload")
public class PageTestUploadServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.getRequestDispatcher("/WEB-INF/admin/testpload.html").forward(req,resp); // 转发！！！ 一次性 ！！！

    }
}

web层

package com.xiexin.web;

import com.alibaba.fastjson.JSON;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet(name = "TestUploadServlet",value = "/houtaidizhi")
@MultipartConfig // 注意 文件上传必须要有这个注解 和前端请求内容类型 做对应 multipart/from-data
public class TestUploadServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        // req.getParameter("name");//用来收值的
        Part part = req.getPart("mypic");//接收文件 mypic要和前端的name名字一样
        // 如果上传文件 需要有MultipartConfig注解
        String contentType = part.getContentType();
        System.out.println("contentType 是： " + contentType);
        //contentType 是： image/png
        String header = part.getHeader("Content-Disposition");
        System.out.println("header 是 " + header);
        //截取字符串
        int i = header.lastIndexOf("=");
        int fileNameStart = i+2;
        String houStr = header.substring(fileNameStart);
        String fileName = houStr.substring(0,houStr.length()-1);
        System.out.println("fileName = " + fileName);
        // 改写图片的命名让这个图片可以重复上传
        String [] split = fileName.split("\\.");
        String newFileName = split[0]+System.currentTimeMillis()+"."+split[1];
        // 上传
        String pcPath = "D:\\webnvzijava\\nvziupload\\"+newFileName;
        part.write(pcPath);
        //header 是 form-data; name="mypic"; filename="屏幕截图 2023-05-28 173325.png"
        long size = part.getSize();
        System.out.println("文件的大小是 " + size);
        //文件的大小是 1533946

        // 把上传后的路径给前端
        Map map = new HashMap();
        map.put("code",200);
        map.put("msg","上传成功");
        map.put("data" , "/nvziupload/"+newFileName );
        String s = JSON.toJSONString(map);
        resp.getWriter().print(s);


    }
}

以上代码可以上传文件到指定路径并返回到前端部分

注意：有些代码路径是我自己写的，需要大家创建并更改路径！！！