美文网首页
react-文件上传

react-文件上传

作者: 雨蒙_snow | 来源:发表于2018-08-06 15:21 被阅读0次

    利用antd的Upload组件

    onFilebeforeUpload = (file) => {
        let fileContent = null;
        const isP12 = file.type === 'application/x-pkcs12';
        const { password } = this.state;
        if (!isP12) {
          message.error('您上传的不是.p12格式文件!');
        }
        const isLt40KB = file.size < 40960;
        if (!isLt40KB) {
          message.error('您上传的证书文件超过40K,请重新确认文件大小!');
        }
        const fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload = () => {
          fileContent = fr.result;
          if (isP12 && isLt40KB) {
            if (password) {
              this.setState({
                ...this.state,
                ...{
                  btnCert: false,
                  fileList: [file],
                  fileContent,
                },
              });
            } else {
              this.setState({
                ...this.state,
                ...{
                  fileList: [file],
                  fileContent,
                  btnCert: true,
                  modelCert: {
                    items: this.initItemsCert(false),
                  },
                },
              });
            }
          } else {
            this.setState({
              ...this.state,
              ...{
                fileList: [],
                fileContent: {},
              },
            });
            this.fileContent = {};
          }
        };
        return isP12 && isLt40KB;
      };
    
    
    render(){
    return(
    
     <Upload
                      name="file"
                        accept="application/x-pkcs12"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        beforeUpload={this.onFilebeforeUpload}
                        onRemove={this.onFileRemove}
                        fileList={fileList}
                      >
                        <Button>
                          <Icon type="upload" /> 选择文件
                        </Button>
                      </Upload>
    )
    
    }
    

    如果是正常的input的话

     onGetFile = (e) => {
        const file = e.target.files[0];
        const fr = new FileReader();
        fr.readAsDataURL(file);
        let fileContent = null;
        fr.onload = () => {
          fileContent = fr.result;
        };
        setTimeout(() => {
          console.log('fileContent', fileContent);
        }, 100);
      };
    
    
            <input type="file" onChange={this.onGetFile} />
    

    相关文章

      网友评论

          本文标题:react-文件上传

          本文链接:https://www.haomeiwen.com/subject/mndfvftx.html