hzero使用之上传文件

天啦,整了一天的上传导入,小菜鸡都要崩溃了,看了一波源码实现机制,似乎明白了一些,但是实际操作惨不忍睹,所以要记录一下我的骚操作,以后遇到要导入上传免得忘了

 首先就是要引入上传组件啦

import { Upload } from 'hzero-ui';

然后直接使用,因为上传是一个点击按钮的操作,自然要绑定一个button

          <Upload {...uploadProps}>
            <Button>
              <Icon type="upload" /> 上传
            </Button>
          </Upload>

然后给一个props

    const uploadProps = {
      name: 'file',
      action: `接口`,
      data: {
        参数
      },
      headers: {
        authorization: `授权token`,
      },
      showUploadList: false, // 不展示上传内容
      onChange(info) { 
        if (info.file.status !== 'uploading') {
          console.log('ffffffff', info.file, info.fileList);
        }
        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.`);
        }
      },
    };

在这里面我被困了两点:

第一点就是我写action的接口的时候,他自己去调用的是本地接口,可把我整懵了,平时都不是这样的,没办法了就是能手动加个apihost,但是这样就迎来了第二点,没有授权token,于是获取授权token

import { getAccessToken } from 'hzero-front/lib/utils/utils';

const accessToken = getAccessToken();

解决

猜你喜欢

转载自www.cnblogs.com/fdd-111/p/12342219.html
今日推荐