我个人博客系统上传特色图片功能就是用layui上传文件组件做的。
另外采用某个生态框架，尽量都统一用该生态框架对应的解决方案，因为这样一来，有这么几个好处?
1.统一而不杂糅,有利于制定相应的编码规范，方便维护;
2.复用性高;
3.不会因公司开发人员的离职而导致一时找不到人来做这件事情;

就这三点，也足以让企业降低相应的开发成本

前端代码实现:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>upload</title>

  <link rel="stylesheet" href="../layui/css/layui.css" media="all">

</head>

<body>

<button type="button" class="layui-btn" id="uploadExample">

  <i class="layui-icon"></i>上传安装包或更新包

</button>

<script src="../layui/layui.js"></script>

<script>

layui.use('upload', function(){

  var upload = layui.upload;

  //执行实例

  var uploadInst = upload.render({

    elem: '#uploadExample' //绑定元素

    ,url: 'http://localhost:8090/blog-web/user/uploadFile' //上传接口

    ,accept: 'file'

    ,done: function(res){

          layui.use('layer', function(){

              var layer = layui.layer;

                layer.msg(res.url, {

                       time: , //6s后自动关闭

                       icon:

                 });

            });

    }

    ,error: function(){

      //请求异常回调

    }

  });

});

</script>

</body>

</html>

后端代码(我在这里采用的是腾讯云对象存储):


@PostMapping(value = "/uploadFile")

    @ApiOperation("上传文件")

    public JSONObject uploadFile(HttpServletRequest request) throws IOException {

        JSONObject json = new JSONObject();

        try {

            COSClientUtil cosClientUtil = new COSClientUtil();

            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

            // 获取上传的文件

            MultipartFile multiFile = multipartRequest.getFile("file");

            String name = cosClientUtil.uploadFileCos(multiFile);

            // 文件名称

            logger.info("name = " + name);

            // 获取文件路径

            String fileUrl = cosClientUtil.getFileUrl(name);

            logger.info("fileUrl = " + fileUrl);

            // 对文件路径进行处理

            String dbFileUrl = fileUrl.substring(, fileUrl.indexOf("?"));

            logger.info("dbFileUrl = " + dbFileUrl);

            json.put("url", dbFileUrl);

            json.put(CommonEnum.RETURN_CODE, "");

            json.put(CommonEnum.RETURN_MSG, "success");

        } catch (Exception e) {

            e.printStackTrace();

            json.put(CommonEnum.RETURN_CODE, "");

            json.put(CommonEnum.RETURN_MSG, "特殊异常");

        }

        return json;

    }

通用腾讯云对象存储工具类:
对于腾讯云对象存储不明白的，可以参考官方文档:
https://cloud.tencent.com/document/product/436/6474

import com.qcloud.cos.COSClient;

import com.qcloud.cos.ClientConfig;

import com.qcloud.cos.auth.BasicCOSCredentials;

import com.qcloud.cos.auth.COSCredentials;

import com.qcloud.cos.http.HttpMethodName;

import com.qcloud.cos.model.GetObjectRequest;

import com.qcloud.cos.model.ObjectMetadata;

import com.qcloud.cos.model.PutObjectRequest;

import com.qcloud.cos.model.PutObjectResult;

import com.qcloud.cos.region.Region;

import org.apache.http.ProtocolException;

import org.springframework.web.multipart.MultipartFile;

import java.io.*;

import java.net.HttpURLConnection;

import java.net.URL;

import java.util.Date;

import java.util.Random; 

public class COSClientUtil {

    private COSClient cOSClient;  

    private static final String ENDPOINT = "ENDPOINT";  //用户可以指定域名，不指定则为默认生成的域名

    //secretId

    private static final String secretId = "secretId";

    //secretKey

    private static final String secretKey = "secretKey";

    //存储桶名称

    private static final String bucketName = "bucketName";//公有读私有写

    //APPID

    private static final String APPID = "APPID";

    // 1 初始化用户身份信息(secretId, secretKey)

    private static COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);

    // 2 设置bucket的区域, COS地域的简称请参照 https://cloud.tencent.com/document/product/436/6224

    private static ClientConfig clientConfig = new ClientConfig(new Region("ap-beijing-1"));

    // 3 生成cos客户端

    private static COSClient cosclient = new COSClient(cred, clientConfig);

    public COSClientUtil() {

        cOSClient = new COSClient(cred, clientConfig);

    }  

    public static String getSecretId() {

        return secretId;

    }

    public static String getsecretKey() {

        return secretKey;

    }

    public static String getBucketName() {

        return bucketName;

    }

    public static String getAPPID() {

        return APPID;

    }

    /**

     * 销毁

     */

    public void destory() {

        cOSClient.shutdown();

    }  

  /**

   * 上传文件

   * @param file

   * @return

   */

   public String uploadFileCos(MultipartFile file) {

       String originalFilename = file.getOriginalFilename();

       try {

           InputStream inputStream = file.getInputStream();  

           this.uploadFileCos(inputStream, originalFilename);  

       } catch (Exception e) {

           e.printStackTrace();

       }

       return originalFilename;

   }

   /**

    * 上传文件

    * @param instream

    * @param fileName

    * @return

    */

   public String uploadFileCos(InputStream instream, String fileName) {

       String ret = "";

       try {

           // 创建上传Object的Metadata

           ObjectMetadata objectMetadata = new ObjectMetadata();

           objectMetadata.setContentLength(instream.available());

           objectMetadata.setCacheControl("no-cache");

           objectMetadata.setHeader("Pragma", "no-cache");

           objectMetadata.setContentType(getcontentType(fileName.substring(fileName.lastIndexOf("."))));

           objectMetadata.setContentDisposition("inline;filename=" + fileName); 

           PutObjectResult putResult = cOSClient.putObject(bucketName,fileName, instream, objectMetadata);

           ret = putResult.getETag();  

           System.out.println(ret);

       } catch (IOException e) {

           e.printStackTrace();

       } finally {

           try {

               if (instream != null) {

                   instream.close();

               }

           } catch (IOException e) {

               e.printStackTrace();

           }

           cosclient.shutdown();

       }

       return ret;  

   }

    /**

     * 获得文件路径 在上传文件之前获取预签名链接用的。

     *

     * @param fileUrl

     * @return

     */

    public String getFileUrl(String fileUrl) {

        return getUrl(fileUrl).toString();

    }  

    /**

     * 生成预签名的上传链接

     *

     * @param key

     * @return

     */

    public URL getUrl(String key) {

        // 设置URL过期时间为10年 3600l* 1000*24*365*10

        Date expiration = new Date(System.currentTimeMillis() + 3600L *  *  *  * );

        // 生成URL

        URL url = cOSClient.generatePresignedUrl(bucketName, key, expiration, HttpMethodName.PUT);  

        return url;

    }  

    /**

     * Description: 判断Cos服务文件上传时文件的contentType

     *

     * @param filenameExtension 文件后缀

     * @return String

     */

    public static String getcontentType(String filenameExtension) {

        if (filenameExtension.equalsIgnoreCase("bmp")) {

            return "image/bmp";

        }

        if (filenameExtension.equalsIgnoreCase("gif")) {

            return "image/gif";

        }

        if (filenameExtension.equalsIgnoreCase("jpeg") || filenameExtension.equalsIgnoreCase("jpg")

                || filenameExtension.equalsIgnoreCase("png")) {

            return "image/jpeg";

        }

        if (filenameExtension.equalsIgnoreCase("html")) {

            return "text/html";

        }

        if (filenameExtension.equalsIgnoreCase("txt")) {

            return "text/plain";

        }

        if (filenameExtension.equalsIgnoreCase("vsd")) {

            return "application/vnd.visio";

        }

        if (filenameExtension.equalsIgnoreCase("pptx") || filenameExtension.equalsIgnoreCase("ppt")) {

            return "application/vnd.ms-powerpoint";

        }

        if (filenameExtension.equalsIgnoreCase("docx") || filenameExtension.equalsIgnoreCase("doc")) {

            return "application/msword";

        }

        if (filenameExtension.equalsIgnoreCase("xml")) {

            return "text/xml";

        }

        return "image/jpeg";

    }  

    /**

     * 下载文件

     * @param downFile

     * @param key

     * @param bucketName

     */

    public void download(File downFile, String key, String bucketName) {

        GetObjectRequest getObjectRequest = new GetObjectRequest(bucketName, key);

        ObjectMetadata downObjectMeta = cOSClient.getObject(getObjectRequest, downFile);

        System.out.println(downObjectMeta.getContentLength());

    }

}

layui上传文件组件(前后端代码实现)的更多相关文章

  1. Springboot第三篇：与前端fetch通信（关于前端传输json数据上传文件等等前后端的处理）

    关于前端接口传递的方法,推荐按以下使用: 若要在服务器上创建资源,推荐使用POST方法 若要检索某个资源,推荐使用GET方法 若要更新资源,推荐使用PUT方法 若要删除某个资源,推荐使用DELETE方 ...

  2. java 附件上传、下载前后端代码

    前言:业务需要:附件上传,需要同时满足浏览器上传,和APP上传附件,并且浏览器端不可使用form表单提交,因为表单提交无法直接获取返回值,除非刷新页面才可显示上传的附件.所以此处使用ajaxfileu ...

  3. Layui上传文件以及数据表格

    layui对于一些前端小白来说,例如我,真的非常的好用,不用去花很多很多的心思在前端美化中,并且提高了很大的工作效率.所以建议一些觉得自己前端技术不是很强,但是想让前端美化一点的可以使用layui. ...

  4. layui上传文件前加入确认提示

    //上传文件 upload: function () { layui.use('upload', function () { var upload = layui.upload; //执行实例 var ...

  5. layui上传文件配合进度条

    首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...

  6. Element ui 上传文件组件（单文件上传） 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  7. JS组件系列——自己封装一个上传文件组件

    页面调用: $('#fileUpload').cemsUpload({ errorEmpty:'<s:text name="cupgrade.view.tip.upload.file. ...

  8. HTML5 中已经可以用 Ajax 上传文件了，而且代码非常简单，借助 FormData 类即可发送文件数据。

    <?phpif (isset($_POST['upload'])) { var_dump($_FILES); move_uploaded_file($_FILES['upfile']['tmp_ ...

  9. asp.net 页面上传文件控件后台代码Request.Files获取不到

    今天开发中遇到页面文件上传控件选择了文件,而后台Request.Files.Count取值为0,之前开发中遇到过几次,老是忘掉,今天记下来. html: <input type="fi ...

随机推荐

  1. Mysql关键字Explain 性能优化神器

    Explain工具介绍 使用EXPLAIN关键字可以模拟优化器执行SQL语句,分析查询语句或是结构的性能瓶颈.在select语句之前增加explaion关键字,MySQL会在查询上设置一个标记,执行查 ...

  2. IDEA报错Plugin "XXX" was not loaded: required plugin "Java EE: EJB, JPA, Servlets" is disabled.

    Java项目转Web项目 把java项目转成web项目时,发现Facets点击+号没有出现web选项. 经查询发现是插件没有正常加载导致的. 解决方案 1.没找到其他原因,重启即可. 2.我的是插件没 ...

  3. Jmeter如何测试接口

    现在对测试人员的要求越来越高,不仅仅要做好功能测试,对接口测试的需求也越来越多!所以也越来越多的同学问,怎样才能做好接口测试? 要真正的做好接口测试,并且弄懂如何测试接口,需要从如下几个方面去分析问题 ...

  4. 分享stl sort函数坑点导致coredump问题

    在<Effective STL> 的条款21中就有讨论:永远让比较函数对相同元素返回false! 也就是说在实现stl sort函数自定义比较器时,一定要满足这种严格弱序化的问题.

  5. django云端留言板

    1.创建应用 django-admin startproject cloudms cd cloudms python manage.py startapp msgapp 2.创建模板文件 在cloud ...

  6. CentOS7.5搭建NFS（Network File System）

    NFS(Network File System)即网络文件系统,是由Sun公司开发的一种通过网络方式共享文件系统的通用共享解决方案.可以将远程Linux系统上的文件共享资源挂载到本地主机(Linux客 ...

  7. 使用icepdf将pdf文件转换成照片(以及隐藏的一个bug)

    首先引入依赖: <dependency> <groupId>org.apache.pdfbox</groupId> <artifactId>pdfbox ...

  8. 学习：Lucas定理

    模板题 在数论中,Lucas定理用于计算二项式系数\({\tbinom {m}{n}}\)被质数\(p\)除的所得的余数. 描述 设\(p\)为素数,\(a,b\in N_+\),且 \[a=a_kp ...

  9. Unable to load bean org.apache.struts2.dispatcher.multipart.MultiPartRequest

    Unable to load bean org.apache.struts2.dispatcher.multipart.MultiPartRequest (jakarta) 把commons-ileu ...

  10. 关于Java锁（学习笔记）

    个人学习笔记! 1)分布式锁的实现?①数据库实现单点.非重入.非阻塞.无失效时间.依赖数据库(要自己设置,可结合排它锁.乐观锁.悲观锁等混合使用)②缓存(Redis等)集群部署解决单点问题.分布式锁方 ...