时间戳

首页 > 解决方案 > 使用 springBoot 和 ReactJs 通过文件上传添加额外数据

reactjs - 使用 springBoot 和 ReactJs 通过文件上传添加额外数据

问题描述

希望你们一切都好，我在 Spring Boot 中上传带有一些额外数据的文件时遇到了一个严重问题，这是我上传文件的java 代码

// Add new AssignmentList List Record
    @PostMapping("/uploadfile")
    public ResponseEntity<String> uploadData(@RequestParam("document") MultipartFile file) throws Exception {
        try {
            String fileName = StringUtils.cleanPath(file.getOriginalFilename());
            AssignmentList  assignmentList = new AssignmentList();
            assignmentList.setFileName(fileName);
            assignmentList.setData(file.getBytes());
            assignmentList.setFileSize(file.getSize());
            assignmentList.setFileType(file.getContentType());
            assignmentList.setUploadTime(new Date());
//            assignmentList.setSemester(assignmentList.getSemester());

            assignmentListDao.save(assignmentList);
            return new ResponseEntity("File Uploaded Successfully", HttpStatus.OK);

        }catch (Exception err){
            return new ResponseEntity<>("File not uploaded", HttpStatus.BAD_REQUEST);
        }
    }

当我上传文件时，我也想添加学期，我放了assignmentList.setSemester(assignmentList.getSemester());，但没用。

这里的 Semester 本身就是一个具有适当构造函数和 getter 和 setter 的实体。学期实体是；

@Entity
@Data
@NoArgsConstructor
@AllArgsConstructor
@Table(name = "semester")
public class Semester implements Serializable {

    @Id
    @GeneratedValue (strategy = GenerationType.IDENTITY)
    @Column(name = "id")
    private int semesterId;

    @Column(name = "semester")
    private int semester;
}

分配列表实体如下；

@Entity
@Data
@NoArgsConstructor
@AllArgsConstructor
@Table(name="assignment_list")
public class AssignmentList implements Serializable {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id")
    private int fileId;

    @Column(name="file_name", length=512, nullable = false, unique = true)
    private String fileName;

    @Column(name="file_size")
    private Long fileSize;

    @Column(name="file_type")
    private String fileType;

    @Column(name="upload_time")
    private Date uploadTime;

    @Lob
    private byte[] data;

    @OneToOne(cascade = {CascadeType.DETACH}, fetch = FetchType.EAGER   )
    private Semester semester;

// constructor
    public AssignmentList(int fileId, String fileName, Long fileSize, Date uploadTime) {
        this.fileId = fileId;
        this.fileName = fileName;
        this.fileSize = fileSize;
        this.uploadTime = uploadTime;
    }
}

当我尝试使用 Reactjs 上传文件时，在 Spring Boot 中使用以下实体，它将上传它但没有semester_id，反应 axios 发布请求是；

const uploadFile = async () => {
        const formData = new FormData();
        formData.append("document", file);
        formData.append("semester", sem);

        await axios
            .post("http://localhost:8080/assignmentlist/uploadfile", formData, {
                headers: {
                    "Content-Type": "multipart/form-data",
                    Accept: "application/json",
                    type: "formData",
                },
            })
            .then(
                function (response) {
                    //handle success
                    console.log(response);
                },
                function (error) {
                    // handle error
                    alert(error.message);
                }
            );
    };

sem它从选择框之一获得的值 在哪里，即onChange(e => setSem(e.target.value))

我希望我能清除我的疑问 提前谢谢:)

标签： reactjsspring-bootvisual-studio-codeaxios

解决方案

将控制器方法的签名更改为：

public ResponseEntity<String> uploadData(@RequestParam("document") MultipartFile file, @RequestParam("semester") Semester semester) throws Exception

然后像这样设置它：

assignmentList.setSemester(semester);

如果这不起作用，只需阅读semesteras anint并自己构建Semester。

推荐阅读