//方法:fileUpload(event) { console.log(event); let file = event.target.files;//一个文件流 let formData = new FormData(); formData.append("file", file[0]);._vue上传文件到后端">
当前位置:   article > 正文

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

vue上传文件到后端

在这里插入图片描述

<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);
        });
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

补充:接口要求传其他值如何处理
在这里插入图片描述
处理也很简单,只需要把接口要求的字段以及想对应的值,添加到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);
          });
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

批量上传处理
关键点 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);
   });
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

方法二:如果使用的是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);
      })
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

上传方式二: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",
          });
        }
      });
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

总结:
关键点就是要将文件流转成formdata对象,在对象里传接口所需要的值,data直接传formData就行

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号