前端导入文件调用后端接口保存

zlzbt

已于 2024-03-23 16:41:14 修改

阅读量656

点赞数

CC 4.0 BY-SA版权

分类专栏： Ts 文章标签：前端 javascript

于 2022-08-02 14:32:15 首次发布

本文链接：https://blog.csdn.net/zlzbt/article/details/126121661

Ts 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用HTML Dragger组件实现文件上传，特别关注了接受指定扩展名(.qplay)的限制，并详细展示了如何在用户选择文件后发送定制的POST请求到后端API，包括文件处理、FormData构造和错误处理。

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

html代码

<Dragger {...allProps}>
    <div className={styles.title}>点击或将文件拖拽到这里上传</div>
    <div className={styles.subTitle}>支持扩展名: .qplay</div>
</Dragger>

选择的文件。

const [uploadFile, setUploadFile] = useState<any>({});

const allProps: UploadProps = {
    accept: '.xlsx',
    fileList: [{ ...uploadFile }],
    maxCount: 1,
    //请求自定义
    customRequest: ({ file, onProgress, onSuccess }) => {
        console.log('file, onProgress, onSuccess', { file, onProgress, onSuccess })
        /* const fileData: any = new FormData();
        fileData.append('file', file); */
        setUploadFile(file)
        playbackImport(formData).then(res => {
            //  onProgress  TODO
        )
    },
    // 立即发起请求
    onChange: async (info) => {
      const { status, originFileObj } = info.file;
      const name = originFileObj.name.split('.');
      if (status === 'done') {
        const file = new File([originFileObj], name, { type: originFileObj.type });
        const formData = new FormData();
        formData.append('file', file);
        /** 以下是其他几种上传的文件格式转换
        const file = new File([JSON.stringify(JSONMap[k])], k, {
          type: 'application/json',
        });
        fileData.append('files', file);
        fileData.append('files', new File([Tool.FileTool.setYamlInfo(yamlInfo)], 'map.yaml', {type: 'application/json'}));
        const unit8array = Tool.FileTool.getPGMDataByImageData(pgmInfo);
        fileData.append('files', new File([new Blob([unit8array])], 'map.pgm', {type: 'image/pgm'}));
        */
        const data = await playbackImport(formData);
        console.log(data);
        if (data.success === false) {
          message.error(data.message || data.code);
        }
        uploadCancel();
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
};

往后端发请求

export const api= async (formData: any) => {
  try {
    return await request<Record<string, any>>(`${basePlaybackURL}/import`, {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data',  //代表多选文件上传  只上传一份文件不需要加
      },
      data: formData,
    });
  } catch (err: any) {
    return err.info;
  }
};