axios mysql,用AXIOS将JSON数据发布到数据库中(使用后端API)

在尝试使用ReactDropzone组件上传JSON文件到MongoDB时,遇到一个问题:只有当浏览器控制台开启时,数据导入才能成功。否则,会收到'语法错误: JSON输入意外结束'的错误。问题可能出在读取和解析文件内容的代码段,特别是`JSON.parse(fileContent)`这一步。在导入按钮的点击事件处理函数中,文件读取和axios请求的处理需要检查是否正确处理了JSON字符串。
摘要由CSDN通过智能技术生成

我有一个很奇怪的问题。我有一个后端api将json数据导入到我的mongodb。

在屏幕上,我有一个上传按钮上传一个文件,我使用了react dropzone。例如,假设我有一个类似“db.json”的文件,在这个文件中有一个类似于如下的json

{

"datapointtypes":[

{"id":"Wall plug","features":[{"providesRequires":"provides","id":"Binary switch"},{"providesRequires":"requires","id":"Binary sensor","min":"1","max":"2"}],"parameters":[{"id":"Communication type","type":"Communication type"}],"functions":[{"id":"Electricity"},{"id":"Switch"}]},

{"id":"Door sensor","features":[{"providesRequires":"provides","id":"Binary sensor"}],"parameters":[{"id":"Communication type","type":"Communication type"}],"functions":[{"id":"Door"},{"id":"Sensor"}]}

],

"datatypes":[

{"id":"Communication type","type":"enum","values":[{"id":"Zwave"},{"id":"Zigbee"}]},

{"id":"Zigbee network address","type":"decimal","min":1,"max":65336,"res":1},

{"id":"Serial port","type":"string"}

],

"features":[

{"id":"Zwave receiver","exposedtype":"Zwave command","functions":[{"id":"Communication"}]},

{"id":"Zigbee receiver","exposedtype":"Zigbee command","functions":[{"id":"Communication"}]},

{"id":"Binary switch","exposedtype":"On off state","functions":[{"id":"Actuator"}]},

{"id":"Binary sensor","exposedtype":"On off state","functions":[{"id":"Sensor"}]}

],

"servicetypes":[

{"id":"Room controller","datapointtype":"Room controller","DelayActive":false,"DelayValue":""},

{"id":"Xiaomi door sensor","datapointtype":"Door sensor","parameters":[{"id":"Zigbee network address","type":"Zigbee network address"},{"id":"Zigbee node id","type":"Zigbee node id"}],"parametervalues":[{"id":"Communication type","value":"Zigbee"}]}

],

"systems":[

{"id":"system 2","services":[{"serviceType":"Room controller","id":"servis 1"}],"serviceRelations":[{"serviceName":"servis 1","featureName":"Binary sensor"}],"parametervalues":[{"id":"Delay","paramName":"Delay","serviceType":"Room controller","value":"binary"}]},

{"id":"system 3","services":[{"serviceType":"Room controller","id":"servis 1"}],"serviceRelations":[{"serviceName":"servis 1","featureName":"Binary sensor"}],"katid":"7"}

]

}

问题是这个。如果浏览器控制台打开,那么我的代码运行成功,我可以将json数据导入到我的mongodb。但是如果浏览器控制台关闭了

“语法错误:JSON输入意外结束”

错误。

这是我在导入按钮上使用的函数

class FileUpload extends Component {

state = {

warning: ""

}

uploadFile = (files, rejectedFiles) => {

files.forEach(file => {

const reader = new FileReader();

reader.readAsBinaryString(file);

let fileContent = reader.result;

axios.post('http://localhost:3001/backendUrl', JSON.parse(fileContent),

{

headers: {

"Content-Type": "application/json"

}

})

.then(response => {

this.setState({warning: "Succeed"})

})

.catch(err => {

console.log(err)

});

});

}

render() {

return (

{this.props.children}

{this.state.warning ? {this.state.warning} : null}

)

}

}

我做错什么了,是什么原因造成的?

你能帮助我吗?

谢谢你

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一个前端框架,不能直接将数据存入 MySQL 数据库。如果你的需求是前端发送 GET 请求获取到的数据存入 MySQL 数据库,那么你需要一个后端服务器来处理这个请求。 以下是一个简单的示例代码,假设你的后端服务器使用 Node.js 和 Express 框架: ``` // index.js const express = require('express') const mysql = require('mysql') const app = express() // 创建 MySQL 连接池 const pool = mysql.createPool({ host: 'localhost', user: 'root', password: 'password', database: 'database_name' }) // 处理 GET 请求 app.get('/data', (req, res) => { // 从 MySQL 连接池获取一个连接 pool.getConnection((err, connection) => { if (err) { console.error(err) res.status(500).send('Internal Server Error') } else { // 从 URL 获取数据 const data = req.query.data // 执行 MySQL 查询 connection.query('INSERT INTO table_name (column_name) VALUES (?)', [data], (err, results) => { connection.release() // 释放连接 if (err) { console.error(err) res.status(500).send('Internal Server Error') } else { res.send('Data inserted successfully') } }) } }) }) // 启动服务器 app.listen(3000, () => { console.log('Server started on http://localhost:3000') }) ``` 在上面的示例代码,我们创建了一个 Express 应用,并通过 `mysql.createPool` 方法创建了一个 MySQL 连接池。当用户访问 `/data` 路由时,我们从 URL 获取数据,然后执行 MySQL 插入操作,最后返回结果给用户。 在你的 Vue.js 应用,你可以使用 `axios` 库发送 GET 请求,示例代码如下: ``` // 在 Vue.js 发送 GET 请求 axios.get('/data', { params: { data: 'hello world' } }).then(response => { console.log(response.data) }).catch(error => { console.error(error) }) ``` 在上面的示例代码,我们使用 `axios.get` 方法发送 GET 请求,并将数据作为 URL 参数传递。当服务器响应时,我们通过 `then` 方法处理响应数据,或通过 `catch` 方法处理错误。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值