vue+springboot的文件上传处理

目录

1.前端：

2.说明

---

1.前端：

使用前端框架中的上传组件，例如element plus及arco design，要使用自定义的上传属性或者change属性，获取上传的文件信息。

示例说明：

画面中的表单存在可输入的信息以及要上传附件。上传组件如下：

开启了拖拽上传，设置了可以上传的格式为apk格式，设置了上传文件个数最多上传一个，设置了自定义的上传方法，上传后触发此方法，设置了默认的文件列表，用于修改时进行显示，设置了是否有文件删除按钮，修改时附件信息不可修改。

上传之后，触发了自定义的上传方法，如下：

// 上传文件
const customRequest = (option: any) => {
  const {onSuccess} = option
  fileItem = option.fileItem
  onSuccess();
}

存储了上传文件的信息，并且执行了上传成功的方法，在画面上会显示上传成功的标志，这是为了让画面显示的更好看，否则会显示上传中的标志，对用户有误导。

点击确定按钮，调用后端的接口，进行文件的上传及信息的存储。如下：

// 表单提交
const handleOk = async () => {
  okLoading.value = true;
  const validRes = await formRef.value?.validate();
  // 校验失败直接返回
  if (validRes) {
    okLoading.value = false;
    return;
  }
  // 附件必填
  if (!fileItem.name) {
    Message.error({content: '附件信息不能为空', position: 'top'})
    okLoading.value = false;
    return;
  }
  const formData = new FormData();
  formData.append('file', fileItem.file);
  formData.append("data", JSON.stringify(insertForm.value))
  // 调用新增接口
  let result;

  // 更新
  try {
    if (isUpdate.value) {
      result = await update({
        reqBody: {
          ...insertForm.value,
          idCondition: insertForm.value.id,
          releaseTime: moment(insertForm.value.releaseTime)
        },
        reqHdr: null
      });
    } else {
      result = await upload(formData);
    }
    getResult(result);
  } catch (e) {
    return;
  } finally {
    okLoading.value = false;
  }
  // 重置表单
  formRef.value?.resetFields()
  drawerVisible.value = false;
  // 调用父组件方法进行画面刷新
  emits('handleQuery');
};

首先进行了表单校验及附件信息的校验。

因为要上传文件，所以使用formData，创建formData对象，存储文件对象及表单对象的字符串。新增时直接调用upload方法，进行上传，使用post方式。api文件中的内容如下：

// 上传数据
export async function upload(params: any): Promise {
    return axios.post("/xxxx/file/uploadInfo", params);
}

后端：

package com.kingagroot.info.tianjiannongshi.mvc.controller.file;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.kingagroot.info.common.annotation.log.SysLog;
import com.kingagroot.info.common.domains.standard.netformat.ResponseBean;
import com.kingagroot.info.common.domains.standard.netformat.RtnBean;
import com.kingagroot.info.common.domains.standard.rescodeformat.ResMsg;
import com.kingagroot.info.tianjiannongshi.mvc.persistent.entity.master.base.AppVersionEntity;
import com.kingagroot.info.tianjiannongshi.mvc.service.master.customize.file.SftpService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

import javax.servlet.http.HttpServletRequest;


/**
 * 文件上传控制层API入口
 *
 * @author Lison 2023/12/11
 */
@Api(value = "/xxxx/file", tags = {"文件上传的控制层API入口"})
@RestController
@RequestMapping("/xxxx/file")
public class SftpController {
    @Autowired
    private SftpService sftpService;

    @SysLog
    @ApiOperation(value = "上传app文件数据接口")
    @PostMapping(value = "/uploadInfo")
    public ResponseBean mb1002(@RequestParam("file") MultipartFile file, @RequestParam(value = "data") String data) {
        RtnBean rtnBean = sftpService.appUpload(file, JSON.parseObject(data,AppVersionEntity.class));
        if(rtnBean.getRsl()) {
            return new ResponseBean("uploadInfo", ResMsg.SUCCESS.getRetCode(), ResMsg.SUCCESS.getRetMsg(), rtnBean.getRtnObj());
        }else {
            return new ResponseBean("uploadInfo", rtnBean.getResMsg().getRetCode(),  rtnBean.getResMsg().getRetMsg(), null);
        }
    }

}

后端使用RequestParam进行参数接口，参数名和前端中formData中的key执行，接收到的表单数据可以使用JSON转换为具体的实体类进行使用。

2.说明

①上传时，请求头中的content-type为multipart/form-data格式的。

②使用formData存储表单中的数据以及文件数据，并作为参数传给后端。

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式。主要是用来上传文件。

// 使用append来添加键/值对到表单里面
formData.append('username', 'yang');
// 使用get方法获取key对应的值
formData.get('username');
// 使用delete方法删除键/值对
formData.delete('username');
// 使用set方法，当key存在时，进行更新；key不存在时，进行添加
formData.set('username', 'Chris');
// 使用has方法判断是否存在key
formData.has('username');
//使用entries方法返回一个 iterator对象 ，此对象可以遍历访问FormData中的键值对
var i = formData.entries();
for(var pair of formData.entries()) {
   console.log(pair[0]+ ', '+ pair[1]);
}
// FormData.keys() 该方法返回一个迭代器（iterator），遍历了该 formData 包含的所有key
for (var key of formData.keys()) {
   console.log(key);

// FormData.values() 方法返回一个允许遍历该对象中所有值的 迭代器 。这些值是 USVString 或是Blob 对象。
for (var value of formData.values()) {
   console.log(value);
}

③后端可以使用requestParam注解进行文件及表单数据的接收，接收表单数据要使用String类型接收，然后再通过JSON工具类转换成具体的实体对象进行使用。 当然，后端也可以使用requestPart进行接收。

④注意使用不同组件时，获取上传文件的方式。

https://blog.csdn.net/qq_38076935/article/details/123008493

@RequestParam和@RequestPart的区别-CSDN博客

SpringBoot @RequestPart 同时接收文件和复杂json数据_requestpart同时接收附件和对象-CSDN博客