上传aliyun图片流程

叁歲伎倆 2022-05-13 11:34 123阅读 0赞

一、前端代码  
1.请求后台上传方法

2.上传到aliyun，并将图片展示在指定id位置

3.上传按钮以及图标展示

4.上传图片的form表单

<div class="modal fade" id="importPictureNewUserModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 50%;" style="overflow-y: auto;">
            <div class="modal-content">
                <form id="myform" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="OSSAccessKeyId" value="">
                    <input type="hidden" name="policy" value="">
                    <input type="hidden" name="Signature" value="">
                    <input type="hidden" name="key" id="key1" value="">
    
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabelNewUser">上传头像图片</h4>
                </div>
                <div class="modal-body" style="height: 350px;">
                    <div style="position: relative;top: 20px; left: 50px;">
                        请选择要上传的图片：
                        <small style="color: gray;">[仅支持.jpg或.png格式]</small>
                    </div>
                    <div style="position: relative;top: 40px; left: 50px;">
                        <input name="file" type="file" id="file">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="aa()">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="dataLoad(0)">上传</button>
                </div>
                </form>
            </div>
        </div>
    </div>

二、后台代码  
1.controller层

//上传头像
        @RequestMapping("/uploadImg")
        @ResponseBody
        public String uploadCheck(String suff) {
            return userService.uploadImg(suff);
        }

2.service层

@Override
        public String uploadImg(String suff) {
            FileUpload fileUpload = new FileUpload();
            String result;
            try {
                Map postObject = fileUpload.getPostObject();
                postObject.put("status", "666");
                result = JSONObject.toJSONString(postObject);
            } catch (UnsupportedEncodingException e) {
                Map<String, String> maps = new HashMap<>();
                maps.put("status", "444");
                maps.put("erro", e.getMessage());
                result = JSONObject.toJSONString(maps);
            }
            return result;
    
        }

3.FileUpload

import com.aliyun.oss.OSSClient;
    import com.aliyun.oss.model.PolicyConditions;
    import org.apache.commons.codec.binary.Base64;
    
    import java.io.UnsupportedEncodingException;
    import java.util.Calendar;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.UUID;
    
    public class FileUpload {
    
        public final static String endpoint = "***";
        public final static String accessKeyId = "***";
        public final static String accessKeySecret = "***";
    
    
        public Map getPostObject() throws UnsupportedEncodingException {
            String key =  UUID.randomUUID().toString().replace("-", "");
            OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
            PolicyConditions policyConditions = new PolicyConditions();
            policyConditions.addConditionItem(PolicyConditions.COND_KEY, key);
            Calendar calendar = Calendar.getInstance();
            calendar.add(Calendar.MINUTE, 10);
            String policy = ossClient.generatePostPolicy(calendar.getTime(), policyConditions);
            String policyBase64 = Base64.encodeBase64String(policy.getBytes());
            String signature = ossClient.calculatePostSignature(policy);
            ossClient.shutdown();
            return new HashMap() {
       {
                this.put("OSSAccessKeyId", accessKeyId);
                this.put("key", key);
                this.put("policy", policyBase64);
                this.put("Signature", signature);
            }};
        }
    
    }

注：此处用到 阿里云 oss资源  
欢迎大家补充  
ps：![这里写图片描述][70]

[70]: /images/20220513/be10c4f0a9eb434b9b2436d43a078e6e.png