webuploader基于springboot的图片上传

最新推荐文章于 2024-07-30 23:06:02 发布

小个泰

最新推荐文章于 2024-07-30 23:06:02 发布

阅读量2.9k

点赞数 1

分类专栏： web 文章标签： webuploader springboot

本文链接：https://blog.csdn.net/zct1115/article/details/79948230

版权

本文介绍如何结合WebUploader组件和SpringBoot进行图片上传。WebUploader是Baidu WebFE团队开发的文件上传组件，支持HTML5和Flash，兼容多种浏览器。文章将展示从webuploader概览、使用步骤到后端处理图片上传的完整流程。

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

声明这里的代码基于我的项目开发的，学习了解代码根据各自的需求完善功能。

一、webuploader概要

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。
官网：http://fex.baidu.com/webuploader/

二、webuploader使用

在官网下载包后导入css,js资源文件

<link href="${ctxPath}/static/css/plugins/webuploader/webuploader.css" rel="stylesheet">
<script src="${ctxPath}/static/js/plugins/webuploader/webuploader.min.js"></script>
<script src="${ctxPath}/static/js/common/web-upload-object.js"></script>

写个文件上传的页面

<div class="form-group">
    <div class="col-sm-4">
        <div id="${id}PreId">
            <div><img width="100px" height="100px"
                @if(isEmpty(avatarImg)){
                      src="${ctxPath}/static/img/boy.jpg"></div>
                @}else{
                      src="${ctxPath}/kaptcha/${avatarImg}"></