VUE (el-upload) +SpringBoot 实现文件上传（带参数传入后台）_el-upload filelist怎么传到后台

VUE+SpringBoot实现文件上传（带参数传入后台）

前台：使用element-UI里面的

步骤一
先写一个文件上传的按钮（我这边是通过弹窗，将上传的文件先加入弹窗点击确定在进行上传）

<el-button
       size="mini"
       icon="el-icon-edit-outline"
       type="primary"
       @click="fileUpload(scope.row)">附件上传</el-button>
1
2
3
4
5

步骤二：
文件上传弹窗（这里用的是 el-upload 这个组件）

 <el-dialog
			title="提示"
			:visible.sync="dialogVisible"
			width="40%"
			>
			<span>
				<el-upload class="upload-demo"
					ref="upload"
					drag 
					action="http://localhost:8872/fileUpload" 
					multiple
					:auto-upload="false"
          with-credentials="true"
					:limit="1"
          :before-upload="handleBefore"
					:on-success="handleFilUploadSuccess"
					:on-remove="handleRemove"
          :data="uploadData"
					>
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!-- <div class="el-upload__tip" slot="tip">只能上传 Excel 文件，且不超过500kb</div> -->
	</el-upload>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleUpload">确 定</el-button>
			</span>
		</el-dialog>
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

**步骤三：**关于el-upload组件里面要用的一些方法

// el-upload相关方法
 handleRemove(file,fileList) {
      console.log("handleRemove方法清理文件")
      console.log(file,fileList);
    },
    //文件弹窗里面确定按钮
 submitUpload() {
      this.$refs.upload.submit();
    },
    // 文件上传成功时的函数
 handleFilUploadSuccess (res,file,fileList) {
      console.log(res,file,fileList)
      this.$message.success("上传成功")
      this.$refs.upload.clearFiles()
      _self.api_findAll();
    },
    handleUpdate () {
      console.log("handleUpdate方法")
      this.dialogVisible = true;
    },
    // 弹窗里面确定按钮处理文件上传的函数
    handleUpload () {
      console.log("handleUpload方法")
     // console.log(res,file)
      this.submitUpload()
      this.dialogVisible = false
    },
    // 上传前的回调函数
 　　handleBefore(file) {
        _self.uploadData.fileid = _self.fileUploadData;  
 　　},
      // 文件上传按钮
    fileUpload(row){
      _self.fileUploadData=row.id; 
      //console.log(document.cookie)
      _self.dialogVisible = true;
    },
    
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

步骤四
在data方法里面定义要传入后台的参数

后台

/**
	 * 文件上传
	 * @param multipartFile
	 * @param id 前台传过来的id
	 * @param response
	 * @param model
	 * @return
	 * @throws MyException
	 */
@PostMapping(value = "fileUpload")
public JsonResult<Object> fileUpload(HttpServletRequest request,@RequestParam(value="fileid")  String id,@RequestParam("file") MultipartFile multipartFile){
	
	if(multipartFile != null){
			//文件上传的保存路径
			String path=configBeanProp.getSoftwarePath();
			//上传的文件的保存的新名称（不含路径）
			String newFileName = multipartFile.getOriginalFilename();
			File file = new File(path+newFileName);
			 /*如果父文件夹不存在，则创建*/
	         File fileParent = file.getParentFile();
	         if (!fileParent.exists()) {
	            fileParent.mkdirs();
	         }
			try {
				//将原来的路径替换成最新的路径
				if(deviceSoftware.getSwpath()!=null && !"".equals(deviceSoftware.getSwpath())) {
					File oldFile = new File(deviceSoftware.getSwpath());
					if (oldFile.exists()) {
						oldFile.delete();
					}
				}
				//将内存的数据写到磁盘上，文件存储
				multipartFile.transferTo(file);
				FileInputStream md5testString =new FileInputStream(path+newFileName);
				//获取文件的md5值
				String md5 = DigestUtils.md5Hex(new FileInputStream(path+newFileName));
				//获取当前系统时间时分秒
				Date date=new Date();
				SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
				String updatetimeString= sdf.format(date);
			} catch (IOException e) {
				e.printStackTrace();				
			}			
		}
		if (res) {
			jsonResult.setSuccess("文件上传成功");
		} else {
			jsonResult.setSuccess("文件上传失败");
		}
		return jsonResult;
	}
	
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
45
46
47
48
49
50
51
52