我个人博客系统上传特色图片功能就是用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. 函数内this指向+排序+找出数组大小项+Math类

    解决函数内this指向: 1,可以在函数外提前声明变量 _this/that = this 2,通过apply()和call()来修改函数内的this指向 二者区别: 用法是一样的,参数形式不一样 f ...

  2. localStorage、sessionStorage、Cookie的区别及用法

    1.webstorage 本地存储,存储在客户端,包括localStorage和sessionStorage. (1)localStorage:生命周期是永久,这意味着除非用户显示在浏览器提供的UI上 ...

  3. set_lb

    修改lb权重,通知钉钉 前提需要安装阿里的核心库 #!/usr/local/python-3.6.4/bin/python3 #coding=utf-8 from aliyunsdkcore.clie ...

  4. org.apache.catalina.core.StandardService - Stopping service [Tomcat]

    今天在启动springboot项目突然启动失败,但是在测试日志文件,以为是日志出错,下面这个是logback打印的异常信息. 2019-05-30 15:09:10.686 [restartedMai ...

  5. AI的自学题库-竞赛-基础知识

    阿里云(天池): https://tianchi.aliyun.com/course?spm=5176.12281897.0.0.209439a9UwObn3 天池竞赛:https://tianchi ...

  6. Httpd服务入门知识-Httpd服务常见配置案例之基于用户账号实现访问控制

    Httpd服务入门知识-Httpd服务常见配置案例之基于用户账号实现访问控制 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.基于用户的访问控制概述 认证质询: WWW-Auth ...

  7. Git 冲突：Your local changes would be overwritten by merge. Commit, stash or revert them to proceed.

    解决方案有三种: 1,无视,直接commit自己的代码. git commit -m "your msg" 2,stash stash翻译为“隐藏”,如下操作: git stash ...

  8. win10如何找回自带的照片查看器

    1.接着我们在打开的记事本中一字不差的输入以下代码 Windows Registry Editor Version 5.00 ; Change Extension's File Type [HKEY_ ...

  9. KVM管理工具

    Ovirt:功能强大,RHEV的开源版本 WebVirtMgr:virt-manager的WEB模式的替代品 ConVirt:分为开源版.商业版 Openstack:开源框架,复杂程度较高

  10. Ping任务管理模块-JavaWeb

    总体框架: 1.创建任务 2.修改任务 3.删除任务 4.环境配置 5.全量PING 6.抽样PING 7.停止 8.查看历史 9.查看执行详情 主要从项目总结和经验角度讲述: 一.项目运行环境 1. ...