ant design Upload 阿里控件前端实现上传下载 json

最新推荐文章于 2024-08-23 16:02:20 发布

梦幽篁

最新推荐文章于 2024-08-23 16:02:20 发布

阅读量3.5k

点赞数 1

分类专栏：记录文章标签： JavaScript ant json 上传下载

本文链接：https://blog.csdn.net/qq_32114025/article/details/86596816

版权

记录专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1：导出/下载

点击按钮要导出成json文件

<i className="export" onClick={this.showExport} role="presentation" onKeyPress={() => { }} />

点击时候调用确认要导出数据方法，方法内容

 showExport(product) {
    const that = this;
    confirm({
      title: '确定要导出?',
      content: `您确定要导出${product.productName}数据`,
      okText: '确定',
      cancelText: '取消',
      onOk() {
        api({
          method: 'POST',
          url: `/product/exportProduct`,
          data: {
            productId : product.id,
            tenantId: product.tenantId,
          },
        }).then((res) => {
          if(res){
            console.log('===导出成功 res :', res);  
            //将JSON 对象转换为字符串
            let dataObj = res;
            let dataJson = JSON.stringify(dataObj);
            let num = parseInt((Math.random() + 1) * Math.pow(10,10-1));
            console.log('===导出成功 num :', num);  
            that.downJson(dataJson,num);
            Toast('导出成功');
          }
        }).catch((err) => {
          // Toast(err.response.data.desc || '删除失败');
        });
      },
      onCancel() { 
      },
    });
  }

其中api是封装好的路径，再拼上对应的url接口，data是接口需要的参数，因为后端返回res是个对象，如图

所以我还得把json对象转成字符串

 //将JSON 对象转换为字符串
let dataObj = res;
let dataJson = JSON.stringify(dataObj);

//JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串

然后传入转换后的字符串和文件名，调用我封装好的下载方法

  downJson(content, filename){
    // 下载文件方法
    let eleLink = document.createElement('a');
    eleLink.download = filename + ".json";
    eleLink.style.display = 'none';
    // 字符内容转变成blob地址
    let blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
  }

名字是用了10位数的随机数拼上.json后缀

2：上传

上传是用了阿里的控件请点控件链接

import { Upload } from 'antd';

首先是导包

<Upload {...uploadIncrProps}>
              <Button type="primary" style={{ height: '32px', float: 'right', marginRight: '5%' }} >
                <span>导入新产品</span>
                <i className="icon-add" />
              </Button>
            </Upload>

然后是样式

const uploadIncrProps = {
      showUploadList: false,
      onChange: this.uploadIncrChange,
      accept: 'json/*',
      action: '/api/product/import',
      headers: {
        token: storage.get('token'),
        terminal: 'WEB',
      },
    };

还有就是控件的配置，api看上面阿里的链接，这边我写了个刷新方法，当状态改变时候会有提示

uploadIncrChange(info) {
    console.log('weichongbin1 info = ', info);
    if (info.file.status === 'uploading') {
      Loading.open();
    }
    if (info.file.status === 'done') {
      Loading.close();
      const { response } = info.file;
      console.log('weichongbin1 response = ', response);
      Toast('导入成功');
    } else if (info.file.status === 'error') {
      Loading.close();
      Toast('导入失败 请确认服务器正常 文件格式为.json');
    }
  }