springboot oss图片上传

左手的ㄟ右手 2022-09-04 03:54 268阅读 0赞

--------------------

## springboot oss图片上传 ##

**官网：[https://help.aliyun.com/document\_detail/31927.html][https_help.aliyun.com_document_detail_31927.html]**

**github：[https://github.com/aliyun/aliyun-oss-java-sdk][https_github.com_aliyun_aliyun-oss-java-sdk]**

**应用：前端直传图片至oss，不经过后端服务器中转，减轻后端服务器压力**

## \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ##

**前端直传并回调**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ_size_16_color_FFFFFF_t_70][]

**上传流程**

前端页面向后端服务器请求获取上传policy、回调参数 
    后端服务器向前端返回上传policy、回调参数
    
    前端页面设置好相关参数，直接向oss发送图片
    oss写入完成后，向后端服务器发送回调请求
    后端服务器执行完回调操作（如存储oss中filename），向oss发送回调响应
    
    oss将后端服务器返回的回调响应返回给前端页面

**oss 文件上传请求参数**

new_multipart_params = {
         'key' : key + '${filename}',
         'policy': policyBase64,
         'OSSAccessKeyId': accessid,
         // 设置服务端返回状态码为200，不设置则默认返回状态码204。
         'success_action_status' : '200', 
         'callback': 　callbackbody,
         'signature': signature,
     };

**oss 向后端服务器发送的回调请求**

Hypertext Transfer Protocol
        POST / HTTP/1.1\r\n
        Host: 47.97.168.53\r\n
        Connection: close\r\n
        Content-Length: 76\r\n
        Authorization: fsNxFF0w******MNAoFb//a8x6v2lI1******h3nFUDALgku9bhC+cWQsnxuCo******tBUmnDI6k1PofggA4g==\r\n
        Content-MD5: eiEMyp7lbL8KStPBzMdr9w==\r\n
        Content-Type: application/x-www-form-urlencoded\r\n
        Date: Sat, 15 Sep 2018 10:24:12 GMT\r\n
        User-Agent: aliyun-oss-callback\r\n
        x-oss-additional-headers: \r\n
        x-oss-bucket: signedcallback\r\n
        x-oss-owner: 15447******20439\r\n
        x-oss-pub-key-url: aHR0cHM6Ly9nb3NzcHVibGljLm******bi5jb20vY2FsbGJhY2tfcHViX2tleV92MS5wZW0=\r\n
        x-oss-request-id: 5B9CDDCC9******88AE2BEA1\r\n
        x-oss-requester: 15447******20439\r\n
        x-oss-signature-version: 1.0\r\n
        x-oss-tag: CALLBACK\r\n
        eagleeye-rpcid: 0.1\r\n
        \r\n
        [Full request URI: http://47.xx.xx.53/]
        [HTTP request 1/1]
        [Response in frame: 39]
        File Data: 76 bytes
    HTML Form URL Encoded: application/x-www-form-urlencoded
        Form item: "filename" = ".snappython.png"      #filename
        Form item: "size" = "6014"
        Form item: "mimeType" = "image/png"
        Form item: "height" = "221"

**后端服务器向oss发送的回调响应**

{
    "String value": "ok",
    "Key": "Status"
    }

## \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ##

**导入 jar 包**

<dependency>
        <groupId>com.aliyun.oss</groupId>
        <artifactId>aliyun-sdk-oss</artifactId>
        <version>3.13.0</version>
    </dependency>

## \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ##

**相关类与接口**

**Oss**

public interface OSS {
    
        String generatePostPolicy(Date var1, PolicyConditions var2) throws ClientException;
               //生成post policy，编码后作为policy返回给前端
    
        String calculatePostSignature(String var1);
               //生成signature，作为signature返回给前端
    
    *********
    bucket 操作
    
        Bucket createBucket(String var1) throws OSSException, ClientException;
        Bucket createBucket(CreateBucketRequest var1) throws OSSException, ClientException;
    
        VoidResult deleteBucket(String var1) throws OSSException, ClientException;
        VoidResult deleteBucket(GenericRequest var1) throws OSSException, ClientException;
    
        List<Bucket> listBuckets() throws OSSException, ClientException;
        BucketList listBuckets(String var1, String var2, Integer var3) throws OSSException, ClientException;
        BucketList listBuckets(ListBucketsRequest var1) throws OSSException, ClientException;
    
    
    *********
    bucket 权限操作
    
        VoidResult setBucketAcl(String var1, CannedAccessControlList var2) throws OSSException, ClientException;
        VoidResult setBucketAcl(SetBucketAclRequest var1) throws OSSException, ClientException;
    
        AccessControlList getBucketAcl(String var1) throws OSSException, ClientException;
        AccessControlList getBucketAcl(GenericRequest var1) throws OSSException, ClientException;
    
    
    *********
    bucket 是否存在
    
        boolean doesBucketExist(String var1) throws OSSException, ClientException;
        boolean doesBucketExist(GenericRequest var1) throws OSSException, ClientException;
    
    
    *********
    object 对象
    
        ObjectListing listObjects(String var1) throws OSSException, ClientException;
        ObjectListing listObjects(String var1, String var2) throws OSSException, ClientException;
        ObjectListing listObjects(ListObjectsRequest var1) throws OSSException, ClientException;
    
    
    *********
    object 存储
    
        PutObjectResult putObject(String var1, String var2, InputStream var3) throws OSSException, ClientException;
        PutObjectResult putObject(String var1, String var2, InputStream var3, ObjectMetadata var4) throws OSSException, ClientException;
        PutObjectResult putObject(String var1, String var2, File var3, ObjectMetadata var4) throws OSSException, ClientException;
        PutObjectResult putObject(String var1, String var2, File var3) throws OSSException, ClientException;
    
        PutObjectResult putObject(PutObjectRequest var1) throws OSSException, ClientException;
    
        PutObjectResult putObject(URL var1, String var2, Map<String, String> var3) throws OSSException, ClientException;
        PutObjectResult putObject(URL var1, String var2, Map<String, String> var3, boolean var4) throws OSSException, ClientException;
        PutObjectResult putObject(URL var1, InputStream var2, long var3, Map<String, String> var5) throws OSSException, ClientException;
        PutObjectResult putObject(URL var1, InputStream var2, long var3, Map<String, String> var5, boolean var6) throws OSSException, ClientException;
    
    
    *********
    object 追加
    
        AppendObjectResult appendObject(AppendObjectRequest var1) throws OSSException, ClientException;
    
    
    *********
    object 复制
    
        CopyObjectResult copyObject(String var1, String var2, String var3, String var4) throws OSSException, ClientException;
        CopyObjectResult copyObject(CopyObjectRequest var1) throws OSSException, ClientException;
    
    
    *********
    object 获取
    
        OSSObject getObject(String var1, String var2) throws OSSException, ClientException;
        ObjectMetadata getObject(GetObjectRequest var1, File var2) throws OSSException, ClientException;
        OSSObject getObject(GetObjectRequest var1) throws OSSException, ClientException;
        OSSObject selectObject(SelectObjectRequest var1) throws OSSException, ClientException;
        OSSObject getObject(URL var1, Map<String, String> var2) throws OSSException, ClientException;
    
    
    *********
    object 删除
    
        VoidResult deleteObject(String var1, String var2) throws OSSException, ClientException;
        VoidResult deleteObject(GenericRequest var1) throws OSSException, ClientException;
    
        DeleteObjectsResult deleteObjects(DeleteObjectsRequest var1) throws OSSException, ClientException;
    
    
    *********
    object 是否存在
    
        boolean doesObjectExist(String var1, String var2) throws OSSException, ClientException;
        boolean doesObjectExist(GenericRequest var1) throws OSSException, ClientException;
        boolean doesObjectExist(String var1, String var2, boolean var3);
        boolean doesObjectExist(GenericRequest var1, boolean var2) throws OSSException, ClientException;
    
    
    *********
    object 修复
    
        RestoreObjectResult restoreObject(String var1, String var2) throws OSSException, ClientException;
        RestoreObjectResult restoreObject(GenericRequest var1) throws OSSException, ClientException;
        RestoreObjectResult restoreObject(String var1, String var2, RestoreConfiguration var3) throws OSSException, ClientException;
        RestoreObjectResult restoreObject(RestoreObjectRequest var1) throws OSSException, ClientException;

**OssClient：ossClient实现了Oss接口**

public class OSSClient implements OSS {
        private CredentialsProvider credsProvider;
        private URI endpoint;
        private ServiceClient serviceClient;
        private OSSBucketOperation bucketOperation;
        private OSSObjectOperation objectOperation;
        private OSSMultipartOperation multipartOperation;
        private CORSOperation corsOperation;
        private OSSUploadOperation uploadOperation;
        private OSSDownloadOperation downloadOperation;
        private LiveChannelOperation liveChannelOperation;

**PolicyConditions**

public class PolicyConditions {
        public static final String COND_CONTENT_LENGTH_RANGE = "content-length-range";
        public static final String COND_CACHE_CONTROL = "Cache-Control";
        public static final String COND_CONTENT_TYPE = "Content-Type";
        public static final String COND_CONTENT_DISPOSITION = "Content-Disposition";
        public static final String COND_CONTENT_ENCODING = "Content-Encoding";
        public static final String COND_EXPIRES = "Expires";
        public static final String COND_KEY = "key";
        public static final String COND_SUCCESS_ACTION_REDIRECT = "success_action_redirect";
        public static final String COND_SUCCESS_ACTION_STATUS = "success_action_status";
        public static final String COND_X_OSS_META_PREFIX = "x-oss-meta-";
        public static final String COND_X_OSS_SERVER_SIDE_PREFIX = "x-oss-server-side-";
        private static Map<String, List<MatchMode>> _supportedMatchRules = new HashMap();
        private List<ConditionItem> _conds = new ArrayList();
    
        public PolicyConditions() {
        }
    
        public void addConditionItem(String name, String value) {
            this.checkMatchModes(MatchMode.Exact, name);
            this._conds.add(new ConditionItem(name, value));
        }
    
        public void addConditionItem(MatchMode matchMode, String name, String value) {
            this.checkMatchModes(matchMode, name);
            this._conds.add(new ConditionItem(matchMode, name, value));
        }
    
        public void addConditionItem(String name, long min, long max) {
            if (min > max) {
                throw new IllegalArgumentException(String.format("Invalid range [%d, %d].", min, max));
            } else {
                this._conds.add(new ConditionItem(name, min, max));
            }
        }
    
        private void checkMatchModes(MatchMode matchMode, String condName) {
        public String jsonize() {
    
    
        static {
            List<MatchMode> ordinaryMatchModes = new ArrayList();
            ordinaryMatchModes.add(MatchMode.Exact);
            ordinaryMatchModes.add(MatchMode.StartWith);
            List<MatchMode> specialMatchModes = new ArrayList();
            specialMatchModes.add(MatchMode.Range);
            _supportedMatchRules.put("content-length-range", specialMatchModes);
            _supportedMatchRules.put("Cache-Control", ordinaryMatchModes);
            _supportedMatchRules.put("Content-Type", ordinaryMatchModes);
            _supportedMatchRules.put("Content-Disposition", ordinaryMatchModes);
            _supportedMatchRules.put("Content-Encoding", ordinaryMatchModes);
            _supportedMatchRules.put("Expires", ordinaryMatchModes);
            _supportedMatchRules.put("key", ordinaryMatchModes);
            _supportedMatchRules.put("success_action_redirect", ordinaryMatchModes);
            _supportedMatchRules.put("success_action_status", ordinaryMatchModes);
            _supportedMatchRules.put("x-oss-meta-", ordinaryMatchModes);
            _supportedMatchRules.put("x-oss-server-side-", ordinaryMatchModes);
        }
    }

**MatchMode**

public enum MatchMode {
        Unknown,
        Exact,
        StartWith,
        Range;
    
        private MatchMode() {
        }
    }

**ConditionItem**

class ConditionItem {
        private String name;
        private MatchMode matchMode;
        private String value;
        private ConditionItem.TupleType tupleType;
        private long minimum;
        private long maximum;
    
        public ConditionItem(String name, String value) {
            this.matchMode = MatchMode.Exact;
            this.name = name;
            this.value = value;
            this.tupleType = ConditionItem.TupleType.Two;
        }
    
        public ConditionItem(String name, long min, long max) {
            this.matchMode = MatchMode.Range;
            this.name = name;
            this.minimum = min;
            this.maximum = max;
            this.tupleType = ConditionItem.TupleType.Three;
        }
    
        public ConditionItem(MatchMode matchMode, String name, String value) {
            this.matchMode = matchMode;
            this.name = name;
            this.value = value;
            this.tupleType = ConditionItem.TupleType.Three;
        }
    
        public void setName(String name) {
        public void setValue(String value) {
        public void setMinimum(long minimum) {
        public void setMaximum(long maximum) {
        public void setMatchMode(MatchMode matchMode) {
        public void setTupleType(ConditionItem.TupleType tupleType) {
    
        public String getName() {
        public String getValue() {
        public long getMinimum() {
        public long getMaximum() {
        public MatchMode getMatchMode() {
        public ConditionItem.TupleType getTupleType() {
    
        public String jsonize() {
    
    
        static enum TupleType {
            Two,
            Three;
    
            private TupleType() {
            }
        }
    }

**OSSClientBuilder**

public class OSSClientBuilder implements OSSBuilder {
        public OSSClientBuilder() {
        }
    
        public OSS build(String endpoint, String accessKeyId, String secretAccessKey) {
            return new OSSClient(endpoint, getDefaultCredentialProvider(accessKeyId, secretAccessKey), getClientConfiguration());
        }
    
        public OSS build(String endpoint, String accessKeyId, String secretAccessKey, String securityToken) {
            return new OSSClient(endpoint, getDefaultCredentialProvider(accessKeyId, secretAccessKey, securityToken), getClientConfiguration());
        }
    
        public OSS build(String endpoint, String accessKeyId, String secretAccessKey, ClientBuilderConfiguration config) {
            return new OSSClient(endpoint, getDefaultCredentialProvider(accessKeyId, secretAccessKey), getClientConfiguration(config));
        }
    
        public OSS build(String endpoint, String accessKeyId, String secretAccessKey, String securityToken, ClientBuilderConfiguration config) {
            return new OSSClient(endpoint, getDefaultCredentialProvider(accessKeyId, secretAccessKey, securityToken), getClientConfiguration(config));
        }
    
        public OSS build(String endpoint, CredentialsProvider credsProvider) {
            return new OSSClient(endpoint, credsProvider, getClientConfiguration());
        }
    
        public OSS build(String endpoint, CredentialsProvider credsProvider, ClientBuilderConfiguration config) {
            return new OSSClient(endpoint, credsProvider, getClientConfiguration(config));
        }
    
        private static ClientBuilderConfiguration getClientConfiguration() {
            return new ClientBuilderConfiguration();
        }
    
        private static ClientBuilderConfiguration getClientConfiguration(ClientBuilderConfiguration config) {
            if (config == null) {
                config = new ClientBuilderConfiguration();
            }
    
            return config;
        }
    
        private static DefaultCredentialProvider getDefaultCredentialProvider(String accessKeyId, String secretAccessKey) {
            return new DefaultCredentialProvider(accessKeyId, secretAccessKey);
        }
    
        private static DefaultCredentialProvider getDefaultCredentialProvider(String accessKeyId, String secretAccessKey, String securityToken) {
            return new DefaultCredentialProvider(accessKeyId, secretAccessKey, securityToken);
        }
    }

**OSSBuilder**

public interface OSSBuilder {
    
        OSS build(String var1, String var2, String var3);
        OSS build(String var1, String var2, String var3, String var4);
    
        OSS build(String var1, String var2, String var3, ClientBuilderConfiguration var4);
        OSS build(String var1, String var2, String var3, String var4, ClientBuilderConfiguration var5);
    
        OSS build(String var1, CredentialsProvider var2);
        OSS build(String var1, CredentialsProvider var2, ClientBuilderConfiguration var3);
    }

## \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ##

**示例**

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**配置文件**

**application.properties**

oss:
      accessKeyId: ******
      accessKeySecret: ******
      endPoint: oss-cn-hangzhou.aliyuncs.com
      bucketName: lihu1234
      callbackUrl: http://cg8b3n.natappfree.cc/callback
      prefix: image/
      expires: 1000

**说明：回调地址不能设置为localhost，会报Private address is forbidden to callback.**

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**dto 层**

**OssProperties**

@Data
    @Component
    @ConfigurationProperties("oss")
    public class OssProperties {
    
        private String accessKeyId;
        private String accessKeySecret;
        private String endPoint;
        private String bucketName;
        private String callbackUrl;
        private String prefix;
        private Long expires;
    }

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**config 层**

**WebConfig**

@Configuration
    public class WebConfig implements WebMvcConfigurer {
    
        @Override
        public void addViewControllers(ViewControllerRegistry registry) {
            registry.addViewController("/index").setViewName("index");
        }
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOriginPatterns("*")
                    .allowedHeaders("*")
                    .allowedMethods("*")
                    .allowCredentials(true);
        }
    }

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**service 层**

**OssService**

@Service
    public class OssService {
    
        @Resource
        private OssProperties ossProperties;
    
        @Resource
        private RestTemplate restTemplate;
    
        public Map<String,String> generatePolicy(){
            OSS ossClient=new OSSClientBuilder().build(ossProperties.getEndPoint(),
                    ossProperties.getAccessKeyId(),ossProperties.getAccessKeySecret());
    
            PolicyConditions conditions=new PolicyConditions();
            conditions.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE,0,1048576000);
            conditions.addConditionItem(MatchMode.StartWith,PolicyConditions.COND_KEY,ossProperties.getPrefix());
    
            Date expireTime=new Date(System.currentTimeMillis()+ossProperties.getExpires()*1000);
            String policy=ossClient.generatePostPolicy(expireTime,conditions);
    
            byte[] policyData=policy.getBytes(StandardCharsets.UTF_8);
            String encodedPolicy= BinaryUtil.toBase64String(policyData);
            String signature=ossClient.calculatePostSignature(policy);
    
            Map<String,String> result=new HashMap<>();
            result.put("accessId",ossProperties.getAccessKeyId());
            result.put("policy",encodedPolicy);
            result.put("signature",signature);
            result.put("prefix",ossProperties.getPrefix());
            result.put("expire",String.valueOf(expireTime.getTime()/1000));
    
            String host="https://"+ossProperties.getBucketName()+"."+ossProperties.getEndPoint();
            result.put("host",host);
    
            JSONObject object=new JSONObject();
            object.put("callbackUrl",ossProperties.getCallbackUrl());
            object.put("callbackBody", "filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");
            object.put("callbackBodyType", "application/x-www-form-urlencoded");
            result.put("callback",BinaryUtil.toBase64String(object.toString().getBytes(StandardCharsets.UTF_8)));
    
            return result;
        }
    
        public Map<String,Object> callback(HttpServletRequest request){
            Map<String,Object> result=new HashMap<>();
    
            if (check(request)){
                result.put("status","ok");
                result.put("code","000000");
            }else {
                result.put("status","check not ok");
                result.put("code","111111");
            }
    
            return result;
        }
    
        @SuppressWarnings("all")
        private boolean check(HttpServletRequest request){
            String authorization=request.getHeader("Authorization");
            String pubKeyUrl = request.getHeader("x-oss-pub-key-url");
    
            byte[] auth = BinaryUtil.fromBase64String(authorization);
            byte[] pubKey = BinaryUtil.fromBase64String(pubKeyUrl);
    
            String pubKeyAddr = new String(pubKey);
            if (!pubKeyAddr.startsWith("http://gosspublic.alicdn.com/")
                    && !pubKeyAddr.startsWith("https://gosspublic.alicdn.com/")){
                return false;
            }
    
            String value=restTemplate.getForObject(pubKeyAddr,String.class);
            String body=restTemplate.getForEntity(pubKeyAddr,String.class).getBody();
            System.out.println(value);
            System.out.println(body);
    
            assert body != null;
            body=body.replace("-----BEGIN PUBLIC KEY-----", "")
                    .replace("-----END PUBLIC KEY-----", "");
    
            String uri = request.getRequestURI();
            String decodeUri = java.net.URLDecoder.decode(uri, StandardCharsets.UTF_8);
    
            String queryString=request.getQueryString();
            if (queryString != null && !queryString.equals("")) {
                decodeUri += "?" + queryString;
            }
    
            int contentLength=request.getContentLength();
            String requestContent="";
            if (contentLength>0){
                try {
                    byte[] content=new byte[contentLength];
                    request.getInputStream().read(content);
    
                    requestContent=new String(content);
                }catch (Exception e){
                    e.printStackTrace();
                }
            }
    
            decodeUri += "\n"+requestContent;
    
            try {
                KeyFactory keyFactory=KeyFactory.getInstance("RSA");
                byte[] encodedKey = BinaryUtil.fromBase64String(body);
                PublicKey pk = keyFactory.generatePublic(new X509EncodedKeySpec(encodedKey));
    
                java.security.Signature signature = java.security.Signature.getInstance("MD5withRSA");
                signature.initVerify(pk);
                signature.update(decodeUri.getBytes(StandardCharsets.UTF_8));
    
                return signature.verify(auth);
            }catch (Exception e){
                e.printStackTrace();
            }
    
            return false;
        }
    }

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**controller 层**

**OssController**

@RestController
    public class OssController {
    
        @Resource
        private OssService ossService;
    
        @RequestMapping("/policy")
        public Map<String,String> policy(){
            return ossService.generatePolicy();
        }
    
        @RequestMapping("/callback")
        public Map<String, Object> callback(HttpServletRequest request){
            return ossService.callback(request);
        }
    
    }

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**前端页面**

**index.html**

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/jquery/jquery-3.6.0.min.js"></script>
        <script src="/layui-v2.6.8/layui/layui.js"></script>
        <link rel="stylesheet" href="/layui-v2.6.8/layui/css/layui.css"/>
        <script>
            $(function (){
                let key, host, policy, OSSAccessKeyId, success_action_status, callback, signature;
    
                $.get({
                    url: "/policy",
                    success: function (result){
                        host=result.host;
                        key=result.prefix;
                        policy=result.policy;
                        OSSAccessKeyId=result.accessId;
                        success_action_status="200";
                        callback=result.callback;
                        signature=result.signature;
    
                        let files;
                        layui.use('upload',function(){
                            const upload=layui.upload;
    
                            const uploadInst = upload.render({
                                elem: "#btn",
                                url: host,
                                auto: false,
                                bindAction: "#btn2",
                                multiple: true,
                                choose: function (obj){
                                    files=obj.pushFile();
    
                                    obj.preview(function (index, file, result){
                                        //console.log(file.name);
                                        //console.log(file);
    
                                        layer.msg(file.name);
                                    })
                                },
                                data: {
                                    key: key,
                                    policy: policy,
                                    OSSAccessKeyId: OSSAccessKeyId,
                                    success_action_status: success_action_status,
                                    callback: callback,
                                    signature: signature,
                                },
                                done: function (result, index){
                                    console.log(result);
    
                                    if (result.code==="000000"){
                                        layer.msg("上传成功");
    
                                        delete files[index];
                                    }else {
                                        layer.msg("上传失败")
                                    }
                                },
                                error: function (index){
                                    console.log("index:"+index)
                                }
                            });
                        })
                    }
                })
            })
        </script>
    </head>
    <body>
    <div th:align="center">
        <span th:align="center" style="color: coral;font-size: large">图片上传</span><br>
        <button id="btn" class="layui-btn">
            <i class="layui-icon layui-icon-search"></i>选择图片
        </button>
        <button id="btn2" class="layui-btn">
            <i class="layui-icon layui-icon-upload"></i>上传图片
        </button>
    </div>
    </body>
    </html>

## \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ##

**使用测试**

**localhost:8080/index**

![20210819233318472.png][]

**点击选择图片、上传图片**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ_size_16_color_FFFFFF_t_70 1][]

**阿里云存储**

![20210819233824793.png][]

[https_help.aliyun.com_document_detail_31927.html]: https://help.aliyun.com/document_detail/31927.html
[https_github.com_aliyun_aliyun-oss-java-sdk]: https://github.com/aliyun/aliyun-oss-java-sdk/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ_size_16_color_FFFFFF_t_70]: /images/20220829/4ad141b780db407180fe9f0f14b90213.png
[20210819233318472.png]: /images/20220829/830649bbecfd4455acb75d9f718cf78d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/8a2605581fff46e0b232203209ec1d3b.png
[20210819233824793.png]: /images/20220829/57f8bb1ae22e48a78f244bd4273762dc.png