layui上传文件组件(前后端代码实现)
我个人博客系统上传特色图片功能就是用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上传文件组件(前后端代码实现)的更多相关文章
- Springboot第三篇：与前端fetch通信（关于前端传输json数据上传文件等等前后端的处理）
关于前端接口传递的方法,推荐按以下使用: 若要在服务器上创建资源,推荐使用POST方法 若要检索某个资源,推荐使用GET方法 若要更新资源,推荐使用PUT方法 若要删除某个资源,推荐使用DELETE方 ...
- java 附件上传、下载前后端代码
前言:业务需要:附件上传,需要同时满足浏览器上传,和APP上传附件,并且浏览器端不可使用form表单提交,因为表单提交无法直接获取返回值,除非刷新页面才可显示上传的附件.所以此处使用ajaxfileu ...
- Layui上传文件以及数据表格
layui对于一些前端小白来说,例如我,真的非常的好用,不用去花很多很多的心思在前端美化中,并且提高了很大的工作效率.所以建议一些觉得自己前端技术不是很强,但是想让前端美化一点的可以使用layui. ...
- layui上传文件前加入确认提示
//上传文件 upload: function () { layui.use('upload', function () { var upload = layui.upload; //执行实例 var ...
- layui上传文件配合进度条
首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...
- Element ui 上传文件组件（单文件上传） 点击提交 没反应
element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...
- JS组件系列——自己封装一个上传文件组件
页面调用: $('#fileUpload').cemsUpload({ errorEmpty:'<s:text name="cupgrade.view.tip.upload.file. ...
- HTML5 中已经可以用 Ajax 上传文件了，而且代码非常简单，借助 FormData 类即可发送文件数据。
<?phpif (isset($_POST['upload'])) { var_dump($_FILES); move_uploaded_file($_FILES['upfile']['tmp_ ...
- asp.net 页面上传文件控件后台代码Request.Files获取不到
今天开发中遇到页面文件上传控件选择了文件,而后台Request.Files.Count取值为0,之前开发中遇到过几次,老是忘掉,今天记下来. html: <input type="fi ...
随机推荐
- Cat搭建遇坑记
1. Cat搭建遇坑记 1.1. 报错 服务端启动 Unable to get component: class com.dianping.cat.analysis.TcpSocketReceiver ...
- js学习之存储
一.Cookie和Session的区别 1.cookie数据存放在客户的浏览器上,session数据放在服务器上(一般以内存.数据库.文件形式). 2.session会在一定时间内保存在服务器上.当访 ...
- 从 Vue 的视角学 React（一）—— 项目搭建
虽然 Vue 在国内一家独大,但在全球范围内,React 依然是最流行的前端框架 最近和一些朋友聊天,发现很多项目都选择了 React 技术栈,而且公司的新项目也决定使用 React 我一直以来都是走 ...
- echart绘制GDP数据
{% extends "base.html" %} {% block self_head_css_js %} {% endblock %} {% block main_conten ...
- Kubernetes学习之路（27）之k8s 1.15.2 部署
目录 一.环境准备 二.软件安装 三.部署master节点 四.部署node节点 五.集群状态检测 一.环境准备 IP地址 节点角色 CPU Memory Hostname Docker versio ...
- prometheus学习系列十一： Prometheus 安全
prometheus安全 我们这里说的安全主要是基本认证和https2种, 目前这2种安全在prometheus中都没有的, 需要借助第三方软件实现, 这里以nginx为例. 基本认证 配置基本认证 ...
- Linux下关于Qt无法调用fcitx的中文输入
1 本机环境: deepin 15.11 Qt 5.11.3 fcitx 输入法 2 问题描述 Qt Creator 和使用 QT 编译的程序运行时均不能使用deepin系统自带的fcitx输入法,且 ...
- SaltStack--项目实战
saltstack项目实战 项目架构规划 后端web服务器使用Nginx+Php作为站点,通过HAproxy做负载均衡,Keepalived做高可用 项目环境准备 说明: 关闭防火墙.selinux. ...
- JVM垃圾回收器理论分析与详解【纯理论】
继续上次[https://www.cnblogs.com/webor2006/p/10740084.html]的理论继续..有点吐血的感觉,都不知道学了这么一大堆理论有何实际意义,本身JVM就是个理论 ...
- python基础笔记-字符串
字符串是 Python 中最常用的数据类型.我们可以使用引号(‘或”)来创建字符串. def main(): str1 = 'hello,world' print(len(str1))#计算字符串的长 ...