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 ...
随机推荐
- drf--认证组件
目录 认证简介 用户认证RBAC(Role-Based Access Control) 局部使用 全局使用 源码分析 认证简介 使用场景:有些接口在进行访问时,需要确认用户是否已经登录,比如:用户需要 ...
- javascript实现网页倒计时效果
一.HTML代码如下: <div class="timer" id="timer"> <span style="color: bla ...
- 医疗行业预测性产品的质量如何把关？MES系统帮大忙
作为行业细分的医疗设备制造正在向工业4.0快速发展.它也可能仍然是世界上受监管最严格的行业之一,产品的个性化发展速度比其他行业更快. 在医疗设备行业中,由于需求或由于市场特定的规定,产品越来越多地定制 ...
- 机器学习10种经典算法的Python实现
广义来说,有三种机器学习算法 1. 监督式学习 工作机制:这个算法由一个目标变量或结果变量(或因变量)组成.这些变量由已知的一系列预示变量(自变量)预测而来.利用这一系列变量,我们生成一个将输入值映射 ...
- java接口中的成员方法和成员变量
接口的含义理解:接口可以理解成统一的"协议",而接口中的属性也属于协议中的内容;但是接口的属性都是公共的,静态的,最终的 接口的成员特点:A:成员变量 只能是常量.默认修饰符 pu ...
- C#8.0——异步流（AsyncStream）
异步流(AsyncStream) 原文地址:https://github.com/dotnet/roslyn/blob/master/docs/features/async-streams.md 注意 ...
- 你遇到过哪些原因造成MySQL异步复制延迟？
master上多为并发事务,salve上则多为单线程回放(MySQL 5.7起,支持真正的并行回放,有所缓解) 异步复制,本来就是有一定延迟的(否则也不叫做异步了,介意的话可以改成半同步复制) sla ...
- anaconda更新tensorflow
在anaconda prompt中,输入: pip install --upgrade --ignore-installed tensorflow gpu版本输入: pip install --upg ...
- 接口自动化--unittest
今天我介绍一个测试框架:不管我们是做接口自动化还是UI自动化,我们都要用的一个框架---unittest unittest是python里面的一个单元测试框架,我们做自动化测试的话,都是要用到这个测试 ...
- Shell脚本监控Linux某个后台进程，当进程死掉后重新启动服务，以httpd为例
Shell脚本如下: vim monitor.sh #!/bin/bash while true # 无限循环 flag=`ps -aux |grep "httpd" |grep ...