前端文件上传报错：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