React-组件上传功能使用实例_react 视频上传组件-优快云博客

本文详细介绍了一种基于Ant Design的前端upload组件和SpringBoot后端的文件上传解决方案。前端利用React和Ant Design的upload组件处理文件选择和上传状态反馈，后端通过SpringBoot接收并处理上传的文件，包括文件元数据的保存和本地磁盘存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

技术点：
【前端-upload组件】https://ant.design/components/upload-cn/
【后端-springboot】

前端核心代码：

handleUploadChange = (info) => {
   if (info.file.status !== 'uploading') {
       console.log("file info--->>", info.file);
   }
   if (info.file.status === 'done') {
       message.success(`${info.file.name} file uploaded successfully`);
   } else if (info.file.status === 'error') {
       message.error(`${info.file.name} file upload failed.`);
   }
};

 const fileProps = {
     name: 'file',
     action: fileUrl,
     accept: '.jar',
     multiple: false,
     withCredentials: true,
     onChange: this.handleUploadChange,
 };
 
  <Upload {...fileProps}>
        <Button>
                 <Icon type="upload"/> 点击上传您的Jar包文件
         </Button>
  </Upload>

后台代码：

 @PostMapping("/upload")
 public Result upload(MultipartHttpServletRequest request) {
     LinkedList<FileMeta> files = mockJarsService.upload(request);
     return success(files);
 }

 /**
     * 上传jar包
     *
     * @param request
     */
    @Override
    public LinkedList<FileMeta> upload(MultipartHttpServletRequest request) {
        LinkedList<FileMeta> files = new LinkedList<>();
        FileMeta fileMeta = null;

        //1. build an iterator
        Iterator<String> itr = request.getFileNames();
        MultipartFile mpf = null;

        //2. get each file
        while (itr.hasNext()) {

            //2.1 get next MultipartFile
            mpf = request.getFile(itr.next());

            //2.2 if files > 10 remove the first from the list
            if (files.size() >= 10)
                files.pop();

            //2.3 create new fileMeta
            fileMeta = new FileMeta();
            // file name named mdf.getOriginalFilename+yyyyMMddHHmm
            String time = DateFormatUtils.format(new Date(), DateUtils.YYYYMMDDHHMM);
            String fileName = mpf.getOriginalFilename()+"_"+time;
            fileMeta.setFileName(fileName);
            fileMeta.setFileSize(mpf.getSize() / 1024 + " Kb");
            fileMeta.setFileType(mpf.getContentType());

            try {
                fileMeta.setBytes(mpf.getBytes());

                // copy file to local disk (make sure the path "e.g. D:/temp/files" exists)
                FileCopyUtils.copy(mpf.getBytes(), new FileOutputStream("D:/opt/files/" + fileName));

            } catch (IOException e) {
                e.printStackTrace();
            }
            //2.4 add to files
            files.add(fileMeta);
        }
        // result will be like this
        // [{"fileName":"app_engine-85x77.png","fileSize":"8 Kb","fileType":"image/png"},...]
        return files;
    }

@JsonIgnoreProperties({"bytes"})
public class FileMeta {

    /**
     * 文件名称
     */
    private String fileName;
    /**
     * 文件大小
     */
    private String fileSize;
    /**
     * 文件类型
     */
    private String fileType;

    private byte[] bytes;
    
    ....setter,getter
    }

public class Result<T> implements Serializable {
    /**
     * 返回code
     */
    private String code;
    /**
     * 返回数据
     */
    private T data;
    /**
     * 返回消息
     */
    private String message;

....setter,getter