React图片上传组件react-fileupload的使用方法

react-fileupload的安装

使用npm install react-fileupload --saveyarn react-fileupload 安装均可

使用方法

若在开发时用的是react@15.x的版本,直接引入一下代码即可使用

const FileUpload = require('react-fileupload');
...
render(){
   
	/*set properties*/
	const options={
   
		baseUrl:'http://127.0.0.1',
		param:{
   
			fid:0
		}
	}
	/*Use FileUpload with options*/
	/*Set two dom with ref*/
	return (
		<FileUpload options={
   options}>
			<button ref="chooseBtn">choose</button>
			<button ref="uploadBtn">upload</button>
		</FileUpload>
	)	        
}

但此代码并不适用于react@16.x的版本

属性值

react-fileupload的属性有很多,这里只对常用的属性进行介绍,其余属性详见github官网

  1. baseUrl:图片上传后提交的目标地址
  2. fileFieldName:为此类提交的图片起一个键名作为标识符
  3. dataType:回应的格式
  4. chooseAndUpload:是否在选择图片时自动提交
  5. uploadSuccess:成功提交后的回调函数
  6. uploadError:未能成功提交的回调函数

要注意的是,在chooseAndUpload属性为true的时候,提交按钮的ref值需要改成chooseAndUpload
以下是代码案例

import React, {
    Component } from 'react'
// 这里引入的是本地文件而不是下载的模块,是为了适配React@16.x的版本,这一块在后面会讲到
import FileUpload from './react-fileupload.jsx'

class FileUploader extends Component {
   
    constructor(props) {
   
        super(props)
        this.state = {
   
            
        }
    }

    render() {
   
        /*set properties*/
        const options={
   
            baseUrl: '/manage/product/upload.do',
            fileFieldName: 'upload_file',
            dataType: 'json',
            chooseAndUpload:true,
            uploadSuccess: (res)=>{
   
                this.props.onSuccess(res.data)
            },
            uploadError: (err)=>{
   
                this.props.onError(err.message||'上传失败')
            }
        }
        /*Use FileUpload with options*/
        /*Set two dom with ref*/
        return (
            <FileUpload options={
   options}>
                <button className="btn btn-xs btn-default" ref="chooseAndUpload">请选择图片</button>
            </FileUpload>
        )
    }
}

React@16.x的版本兼容

在上面提到,react-fileupload是基于react@15.x的版本开发的,而react的一大特点就是新版本对旧版本不兼容,这里给出在react@16.x版本下使用react-fileupload的方法
由于源代码就已经不兼容react@16.x,因此我们需要将源代码取出进行改写,首先找到node_modules里面react-fileupload的源码文件,即下图中的FileUpload.js
源码文件位置

将FileUpload.js中的内容复制出来,并存放到本地目录的文件中,然后开始改写

这里我先给出我改好后的文件,直接复制到本地文件后引入即可使用,具体修改方法放到代码后面,需要安装prop-types,安装方法直接使用npm install prop-types --saveyarn add prop-types即可

import React from 'react'
import PT from 'prop-types';
const emptyFunction = function() {
   }
/*当前IE上传组的id*/
let currentIEID = 0
/*存放当前IE上传组的可用情况*/
const IEFormGroup = [true]
/*当前xhr的数组(仅有已开始上传之后的xhr)*/
let xhrList = []
let currentXHRID = 0


class FileUpload extends React.Component{
   

    constructor(props){
   
        super(props);
        this.state={
   
            chooseBtn: {
   },       //选择按钮。如果chooseAndUpload=true代表选择并上传。
            uploadBtn: {
   },       //上传按钮。如果chooseAndUpload=true则无效。
            before: [],      //存放props.children中位于chooseBtn前的元素
            middle: [],      //存放props.children中位于chooseBtn后,uploadBtn前的元素
            after: []  
        }
    }

    /*根据props更新组件*/
    _updateProps(props) {
   
        this.isIE = !(this.checkIE() < 0 || this.checkIE() >= 10)
        const options = props.options
        this.baseUrl = options.baseUrl     //域名
        this.param = options.param     //get参数
        this.chooseAndUpload = options.chooseAndUpload || false      //是否在用户选择了文件之后立刻上传
        this.paramAddToField = options.paramAddToField || undefined  //需要添加到FormData的对象。不支持IE
        /*upload success 返回resp的格式*/
        this.dataType = 'json'
        options.dataType && (options.dataType.toLowerCase() == 'text') && (this.dataType = 'text')
        this.wrapperDisplay = options.wrapperDisplay || 'inline-block'     //包裹chooseBtn或uploadBtn的div的display
        this.timeout = (typeof options.timeout == 'number' && options.timeout > 0) ? options.timeout : 0     //超时时间
        this.accept = options.accept || ''  //限制文件后缀
        this.multiple = options.multiple || false
        this.numberLimit = options.numberLimit || false //允许多文件上传时,选择文件数量的限制
        this.fileFieldName = options.fileFieldName || false //文件附加到formData上时的key,传入string指定一个file的属性名,值为其属性的值。不支持IE
        this.withCredentials = options.withCredentials || false //跨域时是否使用认证信息
        this.requestHeaders = options.requestHeaders || false //要设置的请求头键值对

        /*生命周期函数*/
        /**
         * beforeChoose() : 用户选择之前执行,返回true继续,false阻止用户选择
         * @param  null
         * @return  {boolean} 是否允许用户进行选择
         */
        this.beforeChoose = options.beforeChoose || emptyFunction
        /**
         * chooseFile(file) : 用户选择文件后的触发的回调函数
         * @param file {File | string} 现代浏览器返回File对象,IE返回文件名
         * @return
         */
        this.chooseFile = options.chooseFile || emptyFunction
        /**
         * beforeUpload(file,mill) : 用户上传之前执行,返回true继续,false阻止用户选择
         * @param file {File | string} 现代浏览器返回File对象,IE返回文件名
         * @param mill {long} 毫秒数,如果File对象已有毫秒数则返回一样的
         * @return  {boolean || object} 是否允许用户进行上传 (hack:如果是obj{
         *     assign:boolean 默认true
         *     param:object
         * }), 则对本次的param进行处理
         */
        this.beforeUpload = options.beforeUpload || emptyFunction
        /**
         * doUpload(file,mill) : 上传动作(xhr send | form submit)执行后调用
         * @param file {File | string} 现代浏览器返回File对象,IE返回文件名
         * @param mill {long} 毫秒数,如果File对象已有毫秒数则返回一样的
         * @return
         */
        this.doUpload = options.doUpload || emptyFunction
        /**
         * uploading(progress) : 在文件上传中的时候,浏览器会不断触发此函数。IE中使用每200ms触发的假进度
         * @param progress {Progress} progress对象,里面存有例如上传进度loaded和文件大小total等属性
         * @return
         */
        this.uploading = options.uploading || emptyFunction
        /**
         * uploadSuccess(resp) : 上传成功后执行的回调(针对AJAX而言)
         * @param resp {json | string} 根据options.dataType指定返回数据的格式
         * @return
         */
        this.uploadSuccess = options.uploadSuccess || emptyFunction
        /**
         * uploadError(err) : 上传错误后执行的回调(针对AJAX而言)
         * @param err {Error | object} 如果返回catch到的error,其具有type和message属性
         * @return
         */
        this.uploadError = options.uploadError || emptyFunction
        /**
         * uploadFail(resp) : 上传失败后执行的回调(针对AJAX而言)
         * @param resp {string} 失败信息
         */
        this.uploadFail = options.uploadFail || emptyFunction
        /**
         * onabort(mill, xhrID) : 主动取消xhr进程的响应
         * @param mill {long} 毫秒数,本次上传时刻的时间
         * @param xhrID {int} 在doUpload时会返回的当次xhr代表ID
         */
        this.onabort = options.onabort || emptyFunction

        this.files = options.files || this.files || false        //保存需要上传的文件
        /*特殊内容*/

        /*IE情况下,由于上传按钮被隐藏的input覆盖,不能进行disabled按钮处理。
         * 所以当disabledIEChoose为true(或者func返回值为true)时,禁止IE上传。
         */
        this.disabledIEChoose = options.disabledIEChoose || false

        this._withoutFileUpload = options._withoutFileUpload || false      //不带文件上传,为了给秒传功能使用,不影响IE
        this.filesToUpload = options.filesToUpload || []       //使用filesToUpload()方法代替
        this.textBeforeFiles = options.textBeforeFiles || false //make this true to add text fields before file data
        /*使用filesToUpload()方法代替*/
        if (this.filesToUpload.length && !this.isIE) {
   
            this.filesToUpload.forEach( file => {
   
                this.files = [file]
                this.commonUpload()
            })
        }

        /*放置虚拟DOM*/
        let chooseBtn, uploadBtn, flag = 0
        const before = [], middle = [], after = []
        if (this.chooseAndUpload) {
   
            React.Children.forEach(props.children, (child)=> {
   
                if (child && child.ref <
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
`react-dropzone` 是一个 React 库,它提供了一个可定制的拖放区域,用于接受文件的拖放和选择文件的方式。它是一个轻量级的库,易于使用和集成,并支持多个文件上传和文件类型限制。 使用 `react-dropzone`,你可以创建一个文件上传组件,允许用户将文件拖放到指定区域或单击区域选择文件。以下是一个简单的示例: ```jsx import React, { useState } from 'react'; import Dropzone from 'react-dropzone'; const FileUpload = () => { const [file, setFile] = useState(null); const onDrop = (acceptedFiles) => { setFile(acceptedFiles[0]); }; return ( <div> <Dropzone onDrop={onDrop}> {({ getRootProps, getInputProps }) => ( <div {...getRootProps()}> <input {...getInputProps()} /> <p>Drag and drop a file here, or click to select a file</p> {file && <p>{file.name}</p>} </div> )} </Dropzone> </div> ); }; export default FileUpload; ``` 在这个例子中,我们创建了一个 `FileUpload` 组件,它使用 `Dropzone` 组件作为文件上传区域。我们将 `onDrop` 回调传递给 `Dropzone`,以便在用户选择文件后处理它。当用户选择文件时,`onDrop` 回调将设置 `file` 状态,并在页面上显示文件名。 `Dropzone` 组件还提供了一个 `accept` 属性,它可以接受一个文件类型数组,用于限制可以上传的文件类型。例如,如果你只想允许上传图像文件,可以将 `accept` 属性设置为 `['image/*']`。 总的来说,`react-dropzone` 是一个非常实用的库,可以帮助你快速创建并定制文件上传组件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值