上传aliyun图片流程

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

        function dataLoad(type) {
            $.post("user/uploadImg", function (data) {
                if(type==0){
                    if (data.status == 666) {
                        $("input[name='OSSAccessKeyId']").val(data.OSSAccessKeyId);
                        $("input[name='Signature']").val(data.Signature);
                        $("#key1").val(data.key);
                        $("input[name='policy']").val(data.policy);
                        uploadFile();
                    }
                }else if(type==1){
                    if (data.status == 666) {
                        $("input[name='OSSAccessKeyId']").val(data.OSSAccessKeyId);
                        $("input[name='Signature']").val(data.Signature);
                        $("#key2").val(data.key);
                        $("input[name='policy']").val(data.policy);
                        uploadFileUp();
                    }
                }

            }, "json");
        }

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

function uploadFile() {
            $.ajax({
                url: '上传地址',　　　　　　　　　　//上传地址
                type: 'POST',
                cache: false,
                data: new FormData($('#myform')[0]),　　　　　　　　　　　　　//表单数据
                processData: false,
                contentType: false,
                success:function(data,status,xhr){
                    if (xhr.status=204){alert("success")
                    $("#img").attr("src","上传地址/"+$("#key1").val());
                    $("#headd").val($("#key1").val());
                    }
                    else alert("failed1")
                },
                error:function () {
                    alert("failed2")
                }
            });
        }

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

<div class="form-group">
    <div class="col-sm-10" style="margin-left:17%;margin-top:10px">
        <img src="../img/a1.jpg" id="img" width="200" height="200">
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importPictureNewUserModal" style="margin-top: 14%;">
        <span class="glyphicon glyphicon-export"></span> 上传头像
        </button>
        <input type="hidden" id="headd" name="head">
     </div>
</div>

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：