React如何下载文件

React如何下载文件

在这里我借助的阿里云来实现下载文件
上代码：

1. 以下region根据实际情况来填，accessKeyId,accessKeySecret是阿里云提供给我们的，bucket指的我们存储空间的名称

安装 oss npm install ali-oss

let OSS = require('ali-oss');
let client = new OSS({
  region: '<Your region>',
  accessKeyId: '<Your AccessKeyId>',
  accessKeySecret: '<Your AccessKeySecret>',
  bucket: '<Your bucket name>'，
});

2. 获取文件下载的地址

    async function listDir(dir) {
        var result = await client.list({
            prefix: dir,
            // delimiter: '/'
        });
        var filename = result.objects;
        // 判断文件是否存在
        if (result.objects !== undefined) {
        //如果存在将要下载的文件循环展示在列表里
            result.objects.forEach(obj => {
                //获取文件的下载地址
                const urladd = client.signatureUrl(obj.name);
                // 将获取到的文件存入本地
                window.localStorage.setItem('user', JSON.stringify(filename));
            });
        }
    }
    // 调用 userphone指的是文件名称
    listDir(userphone)

3. 获取到下载的链接点击此链接可以进行文件下载
   

4. 获取我们存在本地的文件

   var newlist = {}
    // 声明一个空对象把从本地获取到的值赋给这个空对象
    var getname = JSON.parse(window.localStorage.getItem('user'))
    newlist = getname;
    // 判断newlist是否为空
   if (newlist !== null) {
    //按时间顺序排列
        newlist = newlist.sort(function (a, b) {
            return a.name.slice(12, 31) < b.name.slice(12, 31) ? 1 : -1
        })
    }

5. 页面展示代码

      {              
       // 如果newlist==null 就展示空的盒子
           newlist === null ?
          (<div></div>) :
       // 如果newlist里面有数据就展示相应的列表
           ( <div className={classe.ofbox} >
        {
          newlist.map((item, index) => {
     //这里我用的文件名称是以手机号开头的所以要判断文件名与用户手机号是否相符
     // 截取字符串手机号前11位是否与手机号相等 相等的话展示列表 否则不展示则不展示
         if (item.name.slice(0, 11) === userphone) {
         return (
       <div key={index} className={classe.bigbox}>
         <div className={classe.onebox}>{item.name.slice(12)}</div>
         <div className={classe.twobox}>有效日期2020-11-01</div>
         <div onClick={onLoadbtn.bind(this, item)} className={classe.three}>下载文件</div>
       </div>
             )
          }
        })
       }
       </div>
       )
     }

6. 点击下载

 const onLoadbtn = (item, index) => {
        // const urladd = client.signatureUrl(item.name);
        //item.name指的是文件名称
        window.location.href = client.signatureUrl(item.name);
    }

今天就分享到这吧！ 加油加油！！！