antd5:图片上传接口参数

最新推荐文章于 2025-06-27 14:06:37 发布

原创最新推荐文章于 2025-06-27 14:06:37 发布 · 576 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

ui组件库专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在umi4和antd5项目中使用axios进行文件上传，涉及接口/api/file/upload的POST请求，设置了content-type头，并演示了如何在app.ts文件中配置请求拦截器来处理上传参数和设置Content-Type。

使用场景，后端给了一个上传文件的接口/api/file/upload,方法类型为post,参数为{file: binary,type:string}.
上传文件需要设置请求头content-type.
在这里插入图片描述

项目使用的是umi4+antd5
请求拦截便在app.ts文件写。

export const request: RequestConfig = {
  baseURL: '/api',
  timeout: 5000,
  // other axios options you want
  errorConfig: {

    errorHandler () {
    },
    errorThrower () { },
  },
  requestInterceptors: [
    (url, options) => {
      if (options.contentType) {
      //修改请求头
        options.headers['Content-Type'] = options.contentType;
      }
      return { url, options };
    }
  ],
  responseInterceptors: [],
};

上传参数示意
在这里插入图片描述

接口函数

import { request } from '@umijs/max';
export const fileUpload = (
  params: any,
  options?: { [key: string]: any },
) => request(
  '/file/upload',
  {
    method: 'POST',
    data: params,
    ...(options || {}),
    contentType: 'multipart/form-data'
  },
);

  console.log(file, 'file');
  cosUpload({
    file: file.originFileObj,//文件对象
    type: 'application'
  }).then((res) => {
    res?.data && setImageUrl(res.data);
  }).finally(() => {
    setLoading(false);
  });

在这里插入图片描述