[React + Django] 实现在React上传文件,并在Django view中接收。

在有一些业务场景中,需要在react组件中向服务器上传文件,以下是核心的代码,组件的定义省略了,只写了组件内的函数,django的url和表单啥的可以自定义。

React 代码:

    uploadChage(e) {
        this.setState({
            file: e.target.files[0],
        })
    }

    async onUploadFileClick() {
        let url = 'xxxxxxxxxxx';
        let formData = new FormData();

        formData.append('file', this.state.file);

        let resp = await fetch(url, {
            method: 'post',
            body: formData
        });
        let data = await resp.json();
        
        if (data.status === 0) {
            alert(data.result.message)
        } else {
            alert(data.message);
        }
    }
    
    renderUploadTicketFile() {
        return (
            <>
                <input type="file" onChange={this.uploadChage}></input>
                <button onClick={this.onUploadFileClick}>{this.state.currentState}</button>
            </>
        )
    }

Django View代码:

def upload_file(request):
    form = FileForm(request.POST, request.FILES)
    if not form.is_valid():
        return JsonResponseError(errors=form.errors)
    
    handle_uploaded_file(request.FILES['file'])

    return JsonResponseSuccess({ 'message': 'Import Successfully.' })
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Django模板使用React组件,需要进行以下步骤: 1. 安装React:首先需要在你的项目安装React。你可以使用npm或yarn来安装React。安装完成后,你需要在Django模板引入React的JavaScript文件。 2. 创建React组件:在你的项目创建React组件。你可以使用ES6语法来编写组件,然后使用Babel将ES6语法转换为浏览器可识别的JavaScript代码。 3. 将React组件渲染到Django模板:在Django模板,使用一个占位符来代表React组件。然后,使用JavaScript将React组件渲染到该占位符。 以下是一个简单的例子: 1. 安装React: ```bash npm install react react-dom ``` 2. 创建React组件: ```javascript // mycomponent.jsx import React from 'react'; class MyComponent extends React.Component { render() { return ( <div> <h1>Hello, World!</h1> </div> ); } } export default MyComponent; ``` 3. 将React组件渲染到Django模板: ```html <!-- mytemplate.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Template</title> </head> <body> <div id="my-component"></div> <script src="/path/to/react.js"></script> <script src="/path/to/react-dom.js"></script> <script src="/path/to/babel.js"></script> <script type="text/babel"> import MyComponent from './mycomponent.jsx'; ReactDOM.render(<MyComponent />, document.getElementById('my-component')); </script> </body> </html> ``` 在上面的例子,我们将React组件渲染到了一个名为“my-component”的div元素。我们使用了Babel来将ES6语法转换为浏览器可识别的JavaScript代码。注意,我们在Django模板引入了React和Babel的JavaScript文件

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值