oss上传文件服务端签名后直传，遇到的坑（Invalid according to Policy: Policy expired.）

oss上传文件服务端签名后直传，遇到的坑

oss文件上传，我这里讲的是在服务器端生成签名，前端js带上签名直传文件到oss服务器，与前面的博客讲的后端上传不一样。这种上传方式的好处是可以多人同时上传，避免后台的多线程问题。
首先记录一下坑，再说代码。一直报错：Invalid according to Policy: Policy expired. 字面是说Policy 过期了。整死都传不上去。后来发现了，在签名中的过期时间是30 秒，而我的电脑时间比实际时间慢几分钟，也就是每次都或导致签名过期。
解决办法：
1.后台生成签名时，使用前端传递过来的当前时间。
2.生成签名时，官方代码中的参数expireTime默认是30秒，改为更大的时间。

现在讲讲oss文件上传，服务端签名后，前端直传的方法步骤：

1.后端准备接口，让前端获取签名

@RestController
public class OssController {
    @Value("${spring.cloud.alicloud.oss.endpoint}")
    private String endpoint;
    @Value("${spring.cloud.alicloud.bucket}")
    private String bucket;
    @Value("${spring.cloud.alicloud.access-key}")
    private String accessId;

    @Autowired
    private OSS ossClient;
    @RequestMapping("/oss/policy")
    public R policy(){
        // 请填写您的 bucketname 。
        String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
        /**
         * 每天生成一个目录
         */
        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        String dir = format+"/"; // 用户上传文件时指定的前缀。
        Map<String, String> respMap = null;
        try {
        //这里调大了过期时间  重点
            long expireTime = 600;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            // PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = ossClient.calculatePostSignature(postPolicy);

            respMap = new LinkedHashMap<String, String>();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            // respMap.put("expire", formatISO8601Date(expiration));
        } catch (Exception e) {
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
            return R.error("上传失败");
        } finally {
            ossClient.shutdown();
        }
        return R.ok().put("data",respMap);
    }
}

2.前端的代码(核心部分)

<template> 
  <div>
    <el-upload
      action="http://xxx-sso.oss-cn-chengdu.aliyuncs.com"
      :data="dataObj"
      list-type="picture"
      :multiple="false" :show-file-list="showFileList"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="fileList[0].url" alt="">
    </el-dialog>
  </div>
</template>

 methods: {
      emitInput(val) {
        this.$emit('input', val)
      },
      handleRemove(file, fileList) {
        this.emitInput('');
      },
      handlePreview(file) {
        this.dialogVisible = true;
      },
      beforeUpload(file) {
        let _self = this;
        return new Promise((resolve, reject) => {
          policy().then(response => {
            _self.dataObj.policy = response.data.policy;
            _self.dataObj.signature = response.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.accessid;
            _self.dataObj.key = response.data.dir+getUUID()+'_'+'${filename}';
            _self.dataObj.dir = response.data.dir;     
            _self.dataObj.host = response.data.host;
          
            resolve(true)
          }).catch(err => {
            reject(false)
          })
        })
      },
      handleUploadSuccess(res, file) {
        console.log("上传成功...")
        this.showFileList = true;
        this.fileList.pop();
        this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) });
        this.emitInput(this.fileList[0].url);
      }
    }

这样就可以了