element 圖片上傳 oss 後端簽名 前端直傳

<el-upload 
    action 
    :show-file-list="false" 
    :file-list="fileList" 
    list-type="picture-card" 
    :before-upload="uploadBefore" 
    :http-request="picUpload"
>

</el-upload>

 //圖片上傳拿簽名
    async picUpload(file) {
      let pro = new Promise((resolve, rej) => {
        // 判斷簽名有沒有過期
        var res = JSON.parse(localStorage.getItem("sign"));
        var timestamp = Date.parse(new Date()) / 1000;
        if (res && res.expire - 3 > timestamp) {
          resolve(res);
        } else {
          getJsPolicy().then(res => {
            if (res.code == 200) {
              localStorage.setItem("sign", JSON.stringify(res.data));
              resolve(res.data);
            }
          });
        }
      });
      var that = this;
      pro.then(success => {
        var data = success;
        var ossData = new FormData();
        ossData.append("name", file.file.name);
        //key就代表文件層級和阿里雲上的文件名
        let imgType = file.file.type.split("/")[1];
        let filename = file.file.name + file.file.size; //md5對圖片名稱進行加密
        let keyValue = data.dir + "/" + md5(filename) + "." + imgType;
        ossData.append("key", keyValue);
        ossData.append("policy", data.policy);
        ossData.append("OSSAccessKeyId", data.accessid);
        ossData.append("success_action_status", 201);
        ossData.append("signature", data.signature);
        ossData.append("file", file.file, file.file.name);
        axios
          .post(data.host, ossData, {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            if (res.status == 201) {  //上傳成功 上傳的路徑就是要使用的路徑 
              let url = data.host + "/" + keyValue;
              let pic = {
                url: url
              };
              this.picList.push(pic);
            }
          })
          .catch(error => {});
      });
    },

uploadBefore(file) {
      //上傳文件之前校驗圖片格式和大小
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif" ||
        file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上傳圖片只能是 JPG、JPEG、PNG、GIF 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上傳圖片大小不能超過2MB!");
        return false;
      }
    },