upload上传到后台服务器和上传到阿里云服务器前端处理方法是一样的

多乐_π

已于 2022-05-07 15:26:04 修改

阅读量333

点赞数

文章标签： javascript

于 2022-04-26 10:49:21 首次发布

本文链接：https://blog.csdn.net/weixin_45481456/article/details/124422569

版权

这篇博客介绍了如何利用Ant Design的Upload组件来上传Excel文件，包括设置额外的type参数、接受的文件类型、多文件上传、上传动作、授权头以及文件状态的监听方法。同时，还展示了在页面中有多个导入功能时如何区分不同上传状态，并处理上传成功与失败的情况。代码示例中涉及了文件上传至服务器的POST接口以及Formdata的使用。

摘要由CSDN通过智能技术生成

<Upload
                name="file"
//除了参数file: (binary) ，额外添加的type参数
                data={{ type: "excel" }} 
                showUploadList={false}
                accept=".xlsx,.xls"
                multiple
                action={`${window.config.serverOne}/api/v1/business/dict/importDict`}
                method="POST"
                headers={{
                  Authorization: users && `Bearer ${users.access_token}`,
                }}
//这是判断上传文件的状态的方法
                onChange={(info) => this.onChange(info)}
              >
                <Button type="primary" style={{ width: 100, marginLeft: 8, marginRight: 8 }}>导入Excel</Button>
              </Upload>


//监听上传状态
 onChange = async (info: any) => {
    console.log(info, "info---->");
}

// 当一个页面有2个导入时，判断状态可传2个参数

 /** 判断文件上传状态 */
  onChange = async (info: any, idx: number) => {
    if (info?.file?.status === "uploading") {
      if (idx === 1) {
        this.setState({ loadingG: true })
      } else {
        this.setState({ loading: true })
      }
    }
    if (info?.file?.status === "done") {
      if (idx === 1) {
        this.setState({ loadingG: false })
      } else {
        this.setState({ loading: false })
      }
      if (info?.file?.response?.msg === "ok") {
        message.success("文件上传成功")
      } else {
        message.error("文件上传失败")
      }
    } else if (info?.file?.status === "error") {
      message.error("文件上传失败")
      if (idx === 1) {
        this.setState({ loadingG: false })
      } else {
        this.setState({ loading: false })
      }
    }
  }

post接口，上传参数在Formdata