1、【Vue上传文件】当接口Content-Type为multipart/form-data时，如何上传文件到后端

article/2025/6/21 0:48:31

在这里插入图片描述

<input type="file" id="putfile" ref="inputer" @change="fileUpload" />
//方法：
fileUpload(event) {console.log(event);let file = event.target.files;//一个文件流let formData = new FormData();formData.append("file", file[0]);console.log(formData);// 文件上传this.$axios({method: "POST",url: "/api/device/deviceInfo/createDeviceInfoByExcel",headers: {"Content-Type": "multipart/form-data",token: localStorage.getItem("token"),//token值，根据接口要求传或者不传},data: formData,}).then((res) => {console.log(res);}).catch((e) => {alert(e);});},

补充：接口要求传其他值如何处理
在这里插入图片描述
处理也很简单，只需要把接口要求的字段以及想对应的值，添加到formData对象里即可

fileUpload(event){let file = event.target.files;//一个文件流let formData = new FormData();formData.append("file", file[0]);formData.append("name", this.formData2.name);formData.append("msgType", this.formData2.type);console.log(formData);this.$axios({url: "/api/device/message/createMessageFile",method: "post",headers: {"Content-Type": "multipart/form-data",platform: 0,token: localStorage.getItem("token"),},data: formData,}).then((res) => {console.log(res);});
}

方法二：如果使用的是elementUI的el-upload
上传方式一：http-request 覆盖默认的上传行为，可以自定义上传的实现

<el-uploadclass="avatar-uploader":action="action":http-request="fileUpload"
><div class="upload-box"><el-button type="primary" style="height:40px">点击上传</el-button></div>
</el-upload>
//js:
action:'',//上传文件的接口
//上传方法
fileUpload(uploader){let form = new FormData();form.append('file',uploader.file);this.$http({url: this.$root.axiosPath + "/file/uploadPubFile",method: "post",headers: {//请求头，根据自身需求加或者不加Authorization: "Bearer " + getToken(),"Content-Type": "multipart/form-data",},data: form,onUploadProgress: progressEvent => {//这一步是展示上传的进度条，不展示也行，根据自身需求决定let percent=(progressEvent.loaded / progressEvent.total * 100) | 0uploader.onProgress({percent:percent});//调用uploader的进度回调}}).then((res) => {if (res.data.code == 200) {this.$message({message: "上传成功",type: "success",});}else{this.$message.error('上传失败');}}).catch((err)=>{this.$message.error(err);})
}

上传方式二：before-upload 上传文件之前的钩子

<el-uploadclass="avatar-uploader":action="action":before-upload="fileUpload"
><div class="upload-box"><el-button type="primary" style="height:40px">点击上传</el-button></div>
</el-upload>
//js:
action:'',//上传文件的接口fileUpload(file) {//这个方法，再扩展一下 格式和大小限制，没限制的话 可以不加这两个判断if (["xlsx", "xls"].indexOf(file.type) == -1     //控制格式) {//如果是视频格式可以为["video/mp4","video/ogg","video/flv","video/avi","video/wmv","video/rmvb","video/mov"]this.$message.error("请上传正确的文件格式");return false;}var fileSize = file.size / 1024 / 1024 < 50;   //控制大小 修改50的值即可if (!fileSize) {this.$message.error("文件大小不能超过50MB");return false;}let formData = new FormData();formData.append("file", file);this.$http({url: this.$root.axiosPath + "/file/uploadFile",//上传文件接口method: "post",headers: {//请求头，根据自身需求加或者不加Authorization: "Bearer " + getToken(),"Content-Type": "multipart/form-data",},data: formData,}).then((res) => {console.log(res);if (res.data.code == 200) {this.$message({message: "上传成功",type: "success",});}});}