1.后端
通过API上传图像:
-
在pom中添加依赖
<!-- oss-文件上传的准备 --> <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.10.2</version> </dependency> <dependency> <groupId>javax.xml.bind</groupId> <artifactId>jaxb-api</artifactId> <version>2.3.1</version> </dependency> <dependency> <groupId>javax.activation</groupId> <artifactId>activation</artifactId> <version>1.1.1</version> </dependency> <!-- no more than 2.3.3--> <dependency> <groupId>org.glassfish.jaxb</groupId> <artifactId>jaxb-runtime</artifactId> <version>2.3.3</version> </dependency>
-
上传对象
public class OssPutObject { public static String putObject(String url,String fileName) throws FileNotFoundException { // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。 String endpoint = "https://oss-cn-beijing.aliyuncs.com"; // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。 String accessKeyId = AliyunAccout.accessKeyId; String accessKeySecret = AliyunAccout.accessKeySecret; // 创建OSSClient实例。 OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); // 填写本地文件的完整路径。如果未指定本地路径,则默认从示例程序所属项目对应本地路径中上传文件流。 InputStream inputStream = new FileInputStream(url); // 依次填写Bucket名称(oss-img-fxk)和Object完整路径(例如exampledir/exampleobject.txt)。Object完整路径中不能包含Bucket名称。 ossClient.putObject("oss-img-fxk", "courseSS/imgAvatar/"+fileName, inputStream); // 关闭OSSClient。 ossClient.shutdown(); //返回上传文件的url String resultUrl = "https://oss-img-fxk.oss-cn-beijing.aliyuncs.com/courseSS/imgAvatar/"+fileName; return resultUrl; }
2.前端
使用layui框架
<!-- 修改个人信息:头像 -->
<div class="layui-col-md10 xuanzeqiYincang" id="messageP2">
<div class="marginPanel">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6" >
<div class="layui-panel" style="text-align: center">
<p style="font-size: 25px;font-weight: bolder;font-family: serif;margin: 5px">
请上传你的头像</p>
<!--自动封装了一个name为file的参数对应上传的图片-->
<div class="layui-upload">
<button type="button" class="layui-btn" id="updateImg">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="avatar" style="width: 200px;height: 200px">
<p id="demoText"></p>
</div>
<div style="width: 95px;margin-left: 44%">
<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
<div class="layui-progress-bar" lay-percent=""></div>
</div>
</div>
</div>
<p style="font-size: 15px;font-weight: lighter;font-family: serif;margin: 3px">
图片的大小限制为500KB</p>
</div>
</div>
</div>
</div>
</div>
<!--头像上传的引用-->
<script th:inline="javascript">
layui.use(['upload', 'element', 'layer'], function(){
var $ = layui.jquery
,upload = layui.upload
,element = layui.element
,layer = layui.layer;
//常规使用 - 普通图片上传
var uploadInst = upload.render({
elem: '#updateImg'
,url: '/service/update' //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。
,size: 1024*5 //大小限制为5M
,acceptMime: 'image/*'//规定打开文件选择框时,筛选出的文件类型,值为用逗号隔开的 MIME 类型列表。
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#avatar').attr('src', result); //图片链接(base64)
});
element.progress('demo', '0%'); //进度条复位
layer.msg('上传中', {icon: 16, time: 0});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功的一些操作
$('#demoText').html(''); //置空上传失败的状态
console.log(res.code)
console.log(res.msg)
//刷新页面
location.reload();
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
//进度条
,progress: function(n, elem, e){
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
if(n == 100){
layer.msg('上传完毕', {icon: 1});
}
}
});});
</script>
效果展示: