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

在这里插入图片描述

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

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

### 回答1: 可以在el-upload组件中设置headers属性,将Content-Type设置为multipart/form-data。具体代码如下: <el-upload :headers="{ 'Content-Type': 'multipart/form-data' }" action="/upload" :on-success="handleSuccess" > <el-button slot="trigger">选取文件</el-button> <el-button style="margin-left: 10px;" type="primary">上传文件</el-button> </el-upload> ### 回答2: 在el-upload上传组件中,默认的Content-Type值是通过浏览器自动设置的,无法直接修改。如果需要将Content-Type值设置为multipart/form-data,可以尝试以下方法: 1. 使用自定义请求头:可以通过el-upload组件的headers属性来设置自定义请求头,在headers中添加Content-Typemultipart/form-data的键值对。 例如: ```html <el-upload action="/upload" :headers="{'Content-Type': 'multipart/form-data'}" > </el-upload> ``` 2. 使用before-upload钩子:before-upload是el-upload组件的一个钩子函数,在文件上传前会被调用。可以在before-upload钩子中手动设置请求的Content-Type值为multipart/form-data。 例如: ```html <el-upload action="/upload" @before-upload="beforeUpload" > </el-upload> ``` ```javascript methods: { beforeUpload(file) { const uploadOptions = this.$refs.upload.uploadOptions; uploadOptions.headers['Content-Type'] = 'multipart/form-data'; return true; } } ``` 通过以上两种方法,可以实现在el-upload上传组件中将Content-Type值设置为multipart/form-data。 ### 回答3: 在el-upload组件中,通过设置headers属性来设置上传文件Content-Type值为multipart/form-data是不可行的。因为该组件的底层实现是使用XMLHttpRequest进行文件上传,而XMLHttpRequest对象会自动设置请求头的Content-Type,且其值为multipart/form-data,无法手动更改。 要实现上传文件Content-Type值为multipart/form-data,可以选择使用原生的form表单上传,而非使用el-upload组件。使用form表单上传可以自定义请求头以及其他相关的请求参数。 具体步骤如下: 1. 创建一个表单元素,设置属性enctype为multipart/form-data,method为POST。 2. 创建一个input元素,并设置其type为file,name为上传文件的字段名。 3. 使用FormData对象来包装表单元素的数据。 4. 将上传文件Content-Type值设置为multipart/form-data。 5. 使用XMLHttpRequest对象发送请求,将FormData对象作为参数传入send方法。 以下是一个简单的示例代码: ```html <template> <div> <form ref="uploadForm" enctype="multipart/form-data" method="post"> <input type="file" name="file" @change="handleFileChange"> </form> <button @click="uploadFile">上传文件</button> </div> </template> <script> export default { methods: { handleFileChange(e) { // 选择文件后将文件添加到FormData对象 const formData = new FormData(); formData.append('file', e.target.files[0]); // 将FormData对象保存在Vue实例中,后续发送请求使用 this.formData = formData; }, uploadFile() { const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload-url'); xhr.setRequestHeader('Content-Type', 'multipart/form-data'); // 设置Content-Typemultipart/form-data xhr.send(this.formData); // 发送请求 } } } </script> ``` 以上代码中,通过监听input元素的change事件来获取选择的文件,并创建FormData对象将文件添加进去。在发送请求,使用XMLHttpRequest对象设置请求头的Content-Typemultipart/form-data,并且将FormData对象作为请求体发送出去。这样就能实现上传文件Content-Type值为multipart/form-data
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值