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

<input type="file" id="people-export" ref="inputer" @change="fileUpload" />//方法：fileUpload(event) {console.log(event);let file = event.target.files;//一个文件流let formData = new FormData();formData.

听听那晚风

11010人浏览 · 2021-01-25 16:34:13

听听那晚风 · 2021-01-25 16:34:13 发布

在这里插入图片描述

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

批量上传处理
关键点 input加属性multiple 并且for循环处理

<input class="input-file" multiple type="file" @change="selectFile" />

selectFile(event){
	const files = event.target.files;
	let formData = new FormData();
    for (let i = 0; i < files.length; i++) {
          const file = files[i];
          let type = file.name.substring(file.name.lastIndexOf(".") + 1);
          if(type.indexOf("xls") == -1 && type.indexOf("doc") == -1 && type.indexOf("pp") == -1 && type.indexOf("pd") == -1){
            this.$message.error('不支持该格式的文件，请重新上传');//我这里只支持word,excel,ppt,pdf
            return
          }
          let size = file.size / 1024 / 1024 >50
          if(size){
            this.$message.warning('上传文件大小不能超过50M!')
            return
          }
          formData.append("files", file);
   }
   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-upload
    class="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) | 0
            uploader.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-upload
    class="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",
          });
        }
      });
    }