vue获取文件流上传文件

最新推荐文章于 2024-07-23 19:11:17 发布

村头一颗草

最新推荐文章于 2024-07-23 19:11:17 发布

阅读量1.1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41820986/article/details/128701191

版权

该文章展示了如何在Vue.js应用中处理文件上传，特别是Excel文件。通过创建FormData对象并附加文件，然后调用接口`importExcel`进行上传。后端使用`@PostMapping`接收`@RequestBody`和`@RequestPart`的文件数据。

摘要由CSDN通过智能技术生成

vue获取文件流上传文件

重点：

 const formData = new FormData();
 formData.append("file",this.file.raw)

<el-upload
            class="upload-demo"
            ref="upload"
            action="#"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-change="onChange"
            :limit="1"
            :on-exceed="handleExceed"
            :auto-upload="false"
            :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip" style="margin-left: 10px">只能上传<span
              style="color: #007fb3">xlsx/xls/et</span>文件，且不超过<span style="color: #007fb3">10M</span></div>

        </el-upload>

    submitUpload() {
      const formData = new FormData();
      formData.append("file",this.file.raw)
      console.log(this.file)
      console.log("上传事件")
      importExcel(formData).then(data => {
        // this.$notify.success('修改成功')
        // this.visible = false
        // this.$emit('refreshDataList')
        console.log(data)
        console.log(66666)
      }).catch(() => {
        this.canSubmit = true;
      });
      // this.$refs.upload.submit();
    },

	@PostMapping("/importExcel")
	public R importExcel(@RequestBody BigdataStudents bigdataStudents, @RequestPart("file") MultipartFile file) {

//		System.out.println(bigdataStudents);
		System.out.println(file);
		System.out.println(bigdataStudents);

		return R.ok(null);
	}