通过form表单与input来实现上传功能,type=file实现上传框,enctipart确认数据格式,method确实请求方式,触发函数new formData()实例,将需要传的参数通过append方法加入formdata实例中,最后发送数据。
<form id="upload" enctype="multipart/form-data" method="post">
<input type="file" name="file" id="pic" />
<input type="button" value="提交" @click="uploadPic()" />
<span class="showUrl"></span>
<img src="" class="showPic" alt="" />
</form>
async uploadPic() {
var form = document.getElementById("upload");
var formData = new FormData(form);
formData.append("testPort", this.adform.testPort);
formData.append("accessInterface", this.adform.accessInterface);
formData.append("powerInterface", this.adform.powerInterface);
formData.append("cpu", this.adform.cpu);
formData.append("memory", this.adform.memory);
formData.append("clockStatus", this.adform.clockStatus);
formData.append("ipAddress", this.adform.ipAddress);
formData.append("version", this.adform.version);
formData.append("fileName", this.adform.fileName);
console.log("formdata", formData);
const { data: res } = await this.$http.post(
"probeEquManagement/addProbe",
formData
);
console.log("上传res", res);
if (res.code !== 200) {
this.$message.error(res.message);
}
if (res.code == 200) {
this.$message.success(res.message);
this.alldle();
this.getlist();
}
},