用阿里云OSS实现上传头像功能

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>

效果展示：