前端文件上傳報錯：err_cert_common_name_invalid

場景：

　　前端需要上傳文件給后端接口，但是報錯err_cert_common_name_invalid

解決：

　　其實是https協議信任的問題，可以進入開發者模式，在控制台中選中出錯的語句，右鍵在新窗口打開鏈接，瀏覽器會提示鏈接不安全，這時選擇繼續信任網站並打開。

　　下一次再導入文件就可以了。

　　順便記錄一下用el-upload上傳文件的代碼：

　　CSS部分

            <el-upload
              class="upload-demo"
              ref="upload"
              :headers="myheader"
              :action="actionUrl"
              :on-change="handleChange"
              :on-success="handlesuccess"
              :on-remove="handleRemove"
              :on-preview="handlePreview"
              :file-list="fileList"
              :show-file-list="false"
              :auto-upload="false"
              :on-exceed="handleExceed"
              style="float: left"
              :limit="1"
              accept=".xlsx, .xls"
              name="file"
            >
              <el-input v-model="form.snapPath" style="width: 300px"></el-input>
              <template #tip>
                <div class="el-upload__tip">
                  上傳以關鍵字為名的文件,支持.xlsx, .xls
                </div>
              </template>
            </el-upload>

　　JS部分：

//提交文件
    submitUpload() {
      this.submitLoading = true;
      let fd = new FormData();
      fd.append("name", this.fileList[0].name);
      fd.append("file", this.fileList[0].raw);
      let url =
        "";
      axios
        .post(url, fd, {
          headers: {
            "Content-Type": "multipart/form-data",
            "TOKEN": cookies.getToken()
          }
        })
        .then(() => {
          this.submitLoading = false;
          this.$message({
            message: "上傳成功！",
            type: "success"
          });
          this.handleClose();
        })
        .catch(() => {
          this.submitLoading = false;
        });
    },
    handleExceed(files) {
      this.$refs.upload.clearFiles();
      this.$refs.upload.handleStart(files[0]);
    },

　參考：

　　https://www.jianshu.com/p/41bca8daaafd

　　https://element.eleme.cn/#/zh-CN/component/upload