文件上传1

吃炒鸡蛋

已于 2022-09-03 20:14:43 修改

阅读量211

点赞数

文章标签： servlet

于 2022-08-20 17:24:39 首次发布

本文链接：https://blog.csdn.net/weixin_43775723/article/details/126440948

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
    <style>
        .myimg{
            width: 100px;
            height: 100px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<!--/Manager/test-->
<form method="post" action="" enctype="multipart/form-data">
    <input type="file" id="myfile" name="myfile" onchange="getimgfile()"/><br/>
    <img id="myimg" class="myimg" src="img/defaultImg.png"/><br/>
    <input type="submit" name="提交">
</form>
</body>
<script>
    function getimgfile(){
        //file框中的files属性可以获得指定文件列表
        console.log(document.getElementById("myfile").files[0]);
        //发文件
        //1.把文件数据装进表单
        //2.把表单当作请求发送给后端，并且设置请求头类型，告诉后端该文件以字节形式传输

        //1.1创建表单容器
        let form = new FormData;
        //1.2 将传输文件追加进表单容器中（键值对格式 键相当于name属性）
        form.append("myfile",document.getElementById("myfile").files[0]);

        //2.1 使用axios发送请求（post）,并设置请求头类型
        axios.post("/Manager/test",form,{headers: {'Content-Type': 'multipart/form-data'}})
        .then(resp=>{
            //将后端回传过来的文件路径覆盖到图片预览路径上
            document.getElementById("myimg").src = resp.data.imgsrc;
        })
    }
</script>
</html>

@WebServlet("/test")
@MultipartConfig   //有了这个字节服务器就会对文件字节流进行解析了
public class Upload extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //通过name属性定位到文件
        Part myfile = req.getPart("myfile");//解析到part
        ServletContext servletContext = req.getServletContext();
        String realPath = servletContext.getRealPath("/");
        String name = "file/";
        String filename = myfile.getSubmittedFileName();//原文件名
        System.out.println(realPath+name+filename);
        //写入文件到指定路径，带原文件名
        myfile.write(realPath+name+filename);

        //把传入的文件路径响应出去
        Map m = new HashMap(16);
        m.put("imgsrc",name+filename);
        String s = JSON.toJSONString(m);
        System.out.println(s);
        resp.getWriter().print(s);
    }
}

axios

//上传图片发送文件请求
		 myUpload(val){
			 console.log(val);//请求头对象，里面有需要的file属性
			 let myfile = val.file;
			 //创建form表单，把文件塞进去
			 let form = new FormData();
			 form.append("myfile",myfile);
			 this.$axios.post("http://localhost:8080/Manager/users/upload",form,{headers: {'Content-Type': 'multipart/form-data'}})
			 .then(resp=>{
				 console.log(resp);
				 //把回传的数据覆盖到原图片路径上
				 this.addform.headImg = resp.data.retData;
			 })
		 },

总结：
前：图片文件通过前端上传，把图片文件打包进form表单中，通过post请求发送到后端，此时需要设置请求头类型，指定 {‘Content-Type’: ‘multipart/form-data’}才能让服务器知道是字节流读取。
后：服务器用注解@MultipartConfig配置，利用该注解服务器就会对文件字节流进行解析了。
通过请求对象中的getpart方法传入文件name属性获得文件，
把获得的文件写进指定路径中（路径需要自己拼写，可以借助getservletcontext方法）
在这里插入图片描述