如何在 React js 中使用 Fine Uploader

Question

嗨，我是 Reactjs 的新手。我正在使用 fineuploader 将文件上传到 server.i 想要创建一个 FineUploader 组件，这样我就可以在任何需要的地方使用它。

package.json

{
  "name": "Sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "fine-uploader": "^5.7.1",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  }
}

webpack.config.js

var path = require("path");

module.exports = {
    entry: [
       './Components/Main.js'
    ],
    output:{
        path:__dirname,
        filename:'bundle.js'
    },
    resolve: {
        alias: {
          'fine-uploader': path.resolve('node_modules/fine-uploader/fine-uploader')
        }
    },
    module:{
        loaders: [
            {
                test: /fine-uploader\.js/,
                loader: 'exports?qq'
            }
        ],
        loaders:[{
            test: /\.jsx?$/,
            exclude:/node_modules/,
            loader:'babel',
            query:{
              presets: ['react']
            }
        }]
    }
};

FineUploader.js

import React from 'react';

import qq from 'fine-uploader/fine-uploader';

class FineUploader extends React.Component {
  constructor (props) {
    super(props)
  }

  componentDidMount () {
    const fu = new qq.FineUploaderBasic({
      button: this.refs.fu
    })
  }

  render () {
    return <div ref='fu'>Upload!</div>
  }
}

export default FineUploader;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';

import FineUploader from './FineUploader.js';

var MainContent = React.createClass({
    render:function(){
        return (
           <div>
             <FineUploader />
           </div>
        );
    }
});

ReactDOM.render(<MainContent />,document.getElementById('container'));

当我运行应用程序出现以下错误 未捕获类型错误：_fineUploader2.default.FineUploaderBasic 不是构造函数

我不知道我做错了什么，请有人指导我

Answer 1

要将 Fine Uploader 与 React 结合使用，您需要在 componentDidMount lifecycle method.

中创建一个新的上传器实例

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation).

Fine Uploader 需要一个实际呈现的 DOM 元素才能附加事件处理程序、将其他 DOM 元素呈现为子元素等。

在 componentDidMount 内部，我们不仅知道我们的组件已经创建，而且我们还有一个 DOM 元素，我们可以使用 ref.[= 引用它。 17=]

这是一个小示例组件：

class FineUploader extends React.Component {

  componentDidMount () {
    const fu = new qq.s3.FineUploaderBasic({
      button: this.refs.fu
    })
  }

  render () {
    return <div ref='fu'>Upload!</div>
  }
}

Answer 2

尽管我的回答与提出的问题并不完全相关，但我会推荐 react-fine-uploader 库，让您的生活更轻松。

https://github.com/FineUploader/react-fine-uploader

如何在 React js 中使用 Fine Uploader

How to use Fine Uploader in React js

fine-uploader

reactjs

webpack