antd 手动上传文件

先说我要实现的效果:我想用antd 的 upload 实现手动上传文件,上传文件时还有附加参数
我看了官网上说在beforeUpload中返回false,然后通过按钮点击事件触发上传。
Q1:附加参数怎么传到后台(我知道自动上传的话用data,但是手动上传的时候用data传不过去)
Q2:文件流要怎么传给后台啊?
我直接将获取到的filelist加上附加参数,组成json对象,传过去之后,后台报“request has no multipart/form-data Content-Type”的错。
下面是我的代码

submit() {
    const { fileList, beginTime, endTime } = this.state;
    const sendData = {
      file: fileList[0], // 一次只上传一个文件
      beginTime: parseInt(beginTime, 0),
      endTime: parseInt(endTime, 0),
    };
    // console.log(fileList);
    Service.uploadCode(JSON.stringify(sendData))
    .then((res) => {
      this.setState({
        fileList: [],
        // buttonDisabled: true,
      });
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
  }

render() {
    const self = this;
    const {
      uploadLoading,
      submitLoading,
      buttonDisabled,
      beginTime,
      endTime,
    } = this.state;

    const uploadProps = {
      action: '/api/v1/productExchangeCode/import',
      onRemove: (file) => {
        this.setState(({ fileList }) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        console.log(file);
        if (file.name.split('.')[1] !== 'xlsx') {
          message.error('只能上传.xls或者.xlsx文件!', 3);
          return false;
        } else {
          if (!beginTime || !endTime) {
            Modal.warning({
              title: '信息不完整',
              content: '请填写有效期',
            });
            return false;
          }
          self.setState(({ fileList }) => ({
            buttonDisabled: true,
            fileList: [...fileList, file],
          }), () => {
            console.log(this.state.fileList);
          });
          return false;
        }
      },
      fileList: this.state.fileList,
    };
    return (<div>
         <div>
            <Upload {...uploadProps}>
              <Button disabled={buttonDisabled} loading={uploadLoading}>
                <Icon type="upload" />导入兑换码列表
              </Button>
            </Upload>
          </div>
          <Button type="default" size="large" onClick={e => this.handleCancel(e)}>
          取消
        </Button>
        &nbsp;&nbsp;
        <Button type="primary" size="large" loading={submitLoading} onClick={e => this.submit(e)}>
          确定
        </Button>
    </div>)
    
阅读 14.4k
1 个回答

请问找到解决办法了么?我也是来找答案的!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题