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 ...
随机推荐
- Maven中 jar包冲突原理与解决办法
Maven中jar包冲突是开发过程中比较常见而又令人头疼的问题,我们需要知道 jar包冲突的原理,才能更好的去解决jar包冲突的问题.本文将从jar包冲突的原理和解决两个方面阐述Maven中jar包冲 ...
- 28、IE报vuex requires a Promise polyfill in this browser问题解决
解决方法第一步: 安装 babel-polyfill . babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法 npm install --save babel-polyf ...
- elasticsearch基础查询
Es基础数据类型 string 字符串类型,es中最常用的类型,官方文档 比较重要的参数: index分析 analyzed(默认) not_analyzed no store存储 true 独立存储 ...
- Docker以http访问Harbor私有仓库(一)
1 说明 前文Centos7搭建Harbor私有仓库(一)我们成功搭建Harbor,本篇我们主要配置Docker以http方式访问私有仓库 2 Docker配置 2.1 Mac系统 2.1.1 配置D ...
- Python装饰器与闭包
闭包是Python装饰器的基础.要理解闭包,先要了解Python中的变量作用域规则. 变量作用域规则 首先,在函数中是能访问全局变量的: >>> a = 'global var' & ...
- 【Spring Boot】Spring Boot之整合RabbitMQ并实现消息的发送和接收
一.项目配置 1)引入maven坐标 <!--amqp--> <dependency> <groupId>org.springframework.boot</ ...
- 《linux就该这么学》课堂笔记04 常用命令cat、mor...tar、find
本节命令汇总 命令 说明 格式 常用参数 实例 备注 cat 查看纯文本文件(内容较少) cat [选项] 文件名称 -n 显示行号 cat -n install-setup-ks.cfg 查看ins ...
- python-gitlab 之更改 merge_method
参考: https://docs.gitlab.com/ee/api/projects.html https://python-gitlab.readthedocs.io/en/stable/gl_o ...
- Linux命令学习之文件管理
~~~~~~~~~~~~ 前言 ~~~~~~~~~~~~ 推荐一个很好的练习平台:https://overthewire.org/wargames/ Wargames有很多个关卡,从基础的Linux使 ...
- Python与设计模式--工厂模式
快餐点餐系统 想必大家一定见过类似于麦当劳自助点餐台一类的点餐系统吧.在一个大的触摸显示屏上,有3类可以选择的上餐品:汉堡等主餐.小食.饮料.当我们选择好自己需要的食物,支付完成后,订单就生成了.下面 ...