Tag Archives: err_cert_common_name_invalid

Files Upload Error: err_cert_common_name_invalid [How to Solve]

Scenario:

The front end needs to upload files to the back-end interface, but an error is reported err_cert_common_name_invalid

Solution:

In fact, it is a problem of HTTPS protocol trust. You can enter the developer mode, select the wrong statement in the console, right-click to open the link in a new window, and the browser will prompt that the link is unsafe. At this time, you can continue to trust the website and open it.

Just import the file next time.

By the way, record the code of uploading files with El upload:

CSS section

            <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">
                  Upload files with keyword names, support .xlsx, .xls
                </div>
              </template>
            </el-upload>

JS part:

//submit files
    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: "Upload Successfully!",
            type: "success"
          });
          this.handleClose();
        })
        .catch(() => {
          this.submitLoading = false;
        });
    },
    handleExceed(files) {
      this.$refs.upload.clearFiles();
      this.$refs.upload.handleStart(files[0]);
    },