我个人博客系统上传特色图片功能就是用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. Java自学-类和对象 this

    Java 中的 this this 这个关键字,相当于普通话里的"我" 小明说 "我吃了" 这个时候,"我" 代表小明 小红说 " ...

  2. FullCalendar日历插件说明文档（看到这篇手册，解决了困扰我3天的js问题）

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...

  3. HTML5深入学习之鼠标跟随，拖拽事件

    知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover:  当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...

  4. JS案例--Tab栏切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. springboot配置tomcat大全

    server.tomcat.accept-count=100 # Maximum queue length for incoming connection requests when all poss ...

  6. awk - 数据分析和展示

    目录 NAME 格式 常用选项 表达式 PATTERN(模式) 流程控制语句 数组 print,printf格式化输出 常用示例 NAME gawk - pattern scanning and pr ...

  7. jwt揭秘（含源码示例）

      JSON Web Tokens,是一种开发的行业标准 RFC 7519 ,用于安全的表示双方之间的声明.目前,jwt广泛应用在系统的用户认证方面,特别是现在前后端分离项目. 1. jwt认证流程 ...

  8. Codeforces Round #601 (Div. 2) E2. Send Boxes to Alice (Hard Version)

    Codeforces Round #601 (Div. 2) E2. Send Boxes to Alice (Hard Version) N个盒子,每个盒子有a[i]块巧克力,每次操作可以将盒子中的 ...

  9. jmap错误：unknown CollectedHeap type : class sun.jvm.hotspot.gc_interface.CollectedHeap

    原文:https://www.jianshu.com/p/0e5d8db8ed5e 错误场景 今天使用jmap -heap命令查看堆的详细信息报错. [root@instance-2gak1pfv d ...

  10. php72w-common conflicts with php-common-5.4.16-46.el7.x86_64

    安装PHP的BC扩展时,报的错. 使用的命令为 yum install php-bcmath 输出错误: --> Processing Conflict: php72w-common--.w7. ...