OSS服务端签名后直传，语法无效，服务器无法处理请求

Question

vue2上传图片到oss，报错如下：

代码：

    <el-upload
      :action="objData.host"
      :file-list="fileList"
      list-type="picture"
      :before-upload="housePolicy"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>

<script>
export default {
  data() {
    var objData = {
      OSSAccessKeyId: "",
      policy: "",
      signature: "",
      key: "",
      host: "",
      dir: "",
    };
    return {
      objData,
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  methods: {
    upload() {},
    housePolicy(file) {
      let _self = this;
      return new Promise((resolve, reject) => {
        this.axios
          .get("http://localhost:8081/oss/policy")
          .then((response) => {
            _self.objData.OSSAccessKeyId = response.data.accessid;
            _self.objData.policy = response.data.policy;
            _self.objData.signature = response.data.signature;
            _self.objData.dir = response.data.dir;
            _self.objData.host = response.data.host;
            _self.objData.key = response.data.dir + "${filename}";
            console.log(this.objData)
            resolve(true);
          })
          .catch(function (error) {
            console.log(error);
            reject(false);
          });
      });
    },
  },
};
</script>

更新2022-5-17：该问题已解决
错误原因：请求oss时需要将签名附带给el-upload的data参数。这一步我是做了的，不知道什么原因，也许误操作给删掉了，签名没有传给oss，导致400错误。因为一个小失误排查了半天…

修改后再测试，报错403，检查配置，原因是没有给创建的子用户添加相关权限，添加后即可上传成功

Answer 1

问题
1.上传拦截时候会出现 第一次请求localhost本地
2.请求oss报错400
解决：
不请求本地：awit一下避免异步（出现localhost本地）
第二个后台需要排查下 ，避免你踩坑给你代码建议：

housePolicy(file){
 let isLt15M = file.size / 1024 / 1024 < 15;
if(isLt15M){
 this.axios
          .get("http://localhost:8081/oss/policy")
          .then((response) => {
            _self.objData.OSSAccessKeyId = response.data.accessid;
            _self.objData.policy = response.data.policy;
            _self.objData.signature = response.data.signature;
            _self.objData.dir = response.data.dir;
            _self.objData.host = response.data.host;
            _self.objData.key = response.data.dir + "${filename}";
            console.log(this.objData)
       
          })
}
 return isLt15M;
}
另外如果出现401跨域，参考这个地址（当时苹果浏览器出现跨域，谷歌是好的）
https://blog.csdn.net/weixin_46472377/article/details/118360851?spm=1001.2014.3001.5502

```