antd5:图片上传接口参数

使用场景,后端给了一个上传文件的接口/api/file/upload,方法类型为post,参数为{file: binary,type:string}.
上传文件需要设置请求头content-type.
antd5:图片上传接口参数_第1张图片

项目使用的是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: [],
};

上传参数示意
antd5:图片上传接口参数_第2张图片

接口函数

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);
  });

antd5:图片上传接口参数_第3张图片

你可能感兴趣的:(ui组件库,javascript,前端,开发语言)