服务端签名后直传(上传文件到oss)

demo的环境：idea2.6+Tomcat8+vue

我这边只是做了上传图片的demo，下面先看下所需依赖：

jetty-servlet:9.2.10.v20150310

jetty-servlets:9.2.10.v20150310

aliyun-sdk-oss:2.0.6

aliyun-java-sdk-sts:2.1.6

aliyun-java-sdk-core:2.1.7

commons-httpclient:3.1-rc1

guava:r09-jarjar

hadoop-streaming:2.6.0-mr1-cdh5.5.0

commons-codec:1.9

因为我这边开的是两个tomcat，所以不能同时占用一个端口，所以就设置了一下端口：

然后就是设置需要请求的阿里云服务端:

@WebServlet(asyncSupported = true)
public class PostObjectPolicy extends HttpServlet{
   /**
    * 
    */
   private static final long serialVersionUID = 5522372203700422672L;

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
   
       String endpoint = "oss-cn-shanghai.aliyuncs.com";
        String accessId = "LTAInnu3TavG4hjj";
        String accessKey = "WOL9xZ1pq8abRDNfDqbSOXZBshQNbK";
        String bucket = "*******";//服务端名称
        String dir = "images/";//上传到制定文件夹
        String host = "http://" + bucket + "." + endpoint;//请求路径
        OSSClient client = new OSSClient(endpoint, accessId, accessKey);
        try {  
           long expireTime = 30;
           long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = client.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = client.calculatePostSignature(postPolicy);
            
            Map respMap = new LinkedHashMap();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            //respMap.put("expire", formatISO8601Date(expiration));
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            JSONObject ja1 = JSONObject.fromObject(respMap);
            System.out.println(ja1.toString());
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "GET, POST");
            response(request, response, ja1.toString());
            
        } catch (Exception e) {
            e.printStackTrace();
//            Assert.fail(e.getMessage());
        }
    }
   
   private void response(HttpServletRequest request, HttpServletResponse response, String results) throws IOException {
      String callbackFunName = request.getParameter("callback");
      if (callbackFunName==null || callbackFunName.equalsIgnoreCase(""))
         response.getWriter().println(results);
      else
         response.getWriter().println(callbackFunName + "( "+results+" )");
      response.setStatus(HttpServletResponse.SC_OK);
        response.flushBuffer();
   }
   
   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
      doGet(request, response);
    }
}

接下来直接运行上面的main方法就能拿到定好的端口号

我这边是在vue中进行上传的

下面这是我的上传界面以及代码

这边需要注意的点就是需要一个必须的js文件，放在vue的起始界面就好

还有就是必须先点击测试才能选择文件，这里换了几种方法没解决好，后续会改进

效果图：