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]); },