文件上传之用户头像上传

学不会java·

已于 2023-05-13 21:00:55 修改

阅读量216

点赞数

文章标签： servlet java 前端 vue html

于 2023-05-13 15:36:42 首次发布

本文链接：https://blog.csdn.net/m0_67730362/article/details/130658113

版权

文章详细阐述了如何使用Servlet3.0及以上版本处理文件上传，特别是图片上传，涉及Part对象的使用、文件命名和保存。同时，介绍了在Vue组件中如何进行文件上传前的验证（如类型和大小限制），以及上传成功后的处理，包括接收服务器返回的文件路径并显示图片。

摘要由CSDN通过智能技术生成

一、文件上传:

1. 基于Servlet3.0及以上版本

2.定义上传Servlet =》加入

@MultipartConfig注解

1) 定义该servlet支持文件上传

2) 设置上传的参数

3.只有post方法才能接受文件

使用Part对象操作文件(获取文件名,保存文件。。。)

文件上传之上传图片(核心要点)

1.servlet部分

(1)图片上传的Servlet

第一步,使用request.getPart(“文件参数名”)获取到上传的文件,获取其文件后缀,第二步,使用UUID.randomUUID生成文件名称,第三步,使用image.write方法把文件写入指定的磁盘,即下面的(IMAGE_PATH+filename)磁盘路径,最后返回json数据

<1>获取上传的文件

final Part image = request.getPart("image");

// 提取文件后缀名
final String suffix = image.getSubmittedFileName()
.replaceAll(".+(\\.\\w+)", "$1"); // 这是把 .后面的进行切割
// 生成随机文件名
String filename = UUID.randomUUID().toString();
filename = filename.replaceAll("-", ""); // 这是把生成的UUID中的“-”去掉，原因未知
filename += suffix; // 加后缀

<3>把文件写入磁盘

image.write(IMAGE_PATH + filename);

web页面获取图片资源的Servlet

先通过uri获取文件的地址，然后设置文件的返回类型(Content-Type)通过FileInputStream读取文件把文件内容复制到ServeletOutputSteam(out),即把资源写入给浏览器.

Vue组件部分,用户头像上传

(1)文件上传之前的钩子函数,:before-upload="beforeAvatarUpload

可以在该函数中判断文件是否为所需的类型,并且限制文件大小,返回值类型为boolean,若返回false则停止文件上传。示例代码如下

beforeAvatarUpload(file) {
    //图片类型 : image/jpg image/png
    const isIMAGE = file.type.indexOf('image/') > -1;
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isIMAGE) {
        console.info(isIMAGE);
        this.$message.error('上传头像图片只能是图片格式!');
    }

    if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
    }
    //若返回false 则停止文件上传    return isIMAGE && isLt2M;
},

文件上传成功后的钩子函数on-success

文件上传成功之后就会执行action函数，然后on-success指定的函数中的res参数就是action对应的Servlet返回的json参数,即图片的路径为res.data(data为后端设置的json中的参数)

最后通过:src=“该图片的路径”就ok了,该路径也是一个Servlet请求, 图片格式为上述所说的Servlet地址/GetUpload/*

handleAvatarSuccess(res, file) {
    // res 是action执行的Servlet返回的数据，不过，此res != axios.res
    // res ==> axios.res.data
    // res.data ==> webpath
    // 注意 / 前面所代表的前缀
    // res.data.substring(1); 也可
    this.editData.image = "."+res.data;
    console.info(this.editData.image);
    this.$forceUpdate();
},

图片图片上传的组件

<el-upload
        name = "image"
        class="avatar-uploader"
        action="UploadImageServlet.s"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
    <img v-if="editData.image" :src="editData.image" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>