0
点赞
收藏
分享

微信扫一扫

React(1702H)文件上传和分页查找

1.上传

dom:

<div className="m-upload-input-wrap">
<input type="file" value="" onChange={this.handleUpload.bind(this)}/>
</div>

 接口:

handleUpload(e) {
const data = new FormData();
data.append('file', e.target.files[0]);
const params = `/upload`
axios({
method: 'post',
data: data,
url: params,
timeout: 1000 * 60 * 60 * 8
})
.then((res) => {
console.log(res)
this.getUploadList()
})
.catch((err) => {
console.log(err)
})
},

2.显示列表(antd table)

dom:

<div>
<Table
columns={columns}
dataSource={list}
rowKey="uid"
pagination={ total > 10 ? {
total: total,
current: current,
pageSize: 10,
onChange: this.handlePage.bind(this)
} : false}></Table>
</div>

columns:

renderColumns () {
return [
{
title: '图片',
dataIndex: 'path',
render: (text, record, index) => {
return <span><img src={text} className="m-upload-img"></img></span>
}
},
{
title: '文件名',
dataIndex: 'originalname',
key: 'originalname',
},
{
title: '操作',
render: (text, record, index) => {
return <div>
<Button onClick={this.handleCopy.bind(this, record)} >复制链接</Button>
</div>
}
}
]
},

获取列表:

getUploadList() {
Api.getUploadList(`?page=1&size=10`).then((res) => {
console.log(res)
if (res.code === keyCode.SUCCESS) {
this.setState({
list: res.data.list,
current: 1,
total: res.data.total
})
}
})
},

分页:

handlePage(current) {
Api.getUploadList(`?page=${current}&size=10`).then((res) => {
console.log(res)
if (res.code === keyCode.SUCCESS) {
this.setState({
list: res.data.list,
current: current,
total: res.data.total
})
}
})
}

3.后端接口

用到的npm包:

const multer = require('multer')

配置:

var storage = multer.diskStorage({
destination: function (req, file, cb) {
// 接收到文件后输出的保存路径(若不存在则需要创建)
cb(null, 'public/images/');
},
filename: function (req, file, cb) {
// 将保存文件名设置为 时间戳 + 文件原始名,比如 151342376785-123.jpg
cb(null, Date.now() + "-" + file.originalname);
}
});
var upload = multer({ storage: storage });

参考链接:​​https://www.npmjs.com/package/multer​​

上传接口:

//文件上传
app.post('/upload', upload.single('file'), async function (req, res, next) {
var file = req.file;
console.log('文件类型:%s', file.mimetype);
console.log('原始文件名:%s', file.originalname);
console.log('文件大小:%s', file.size);
console.log('文件保存路径:%s', file.path);
console.log(file)
let uid = getID(10)
let createTime = new Date().getTime()
const data = await uploadAdd(
uid,
`http://localhost:8888/images/${file.filename}`,
file.originalname,
createTime)
if (data) {
res.send(({
code: 200,
data: file,
message: '上传成功'
}))
} else {
res.send(({
code: 400,
data: file,
message: '上传失败'
}))
}
})

分页查找:

//获取上传列表
app.get('/upload/list', async function (req, res) {
let { page, size } = req.query
start = (page - 1) * size
const data = await getUploadList(start, size)
console.log(data)
let token = req.headers['token']
let auth = getTokenAuth(token)
if (auth) {
res.send(({
code: 200,
data: data,
message: '上传文件列表'
}))
} else {
deleteTokenHistory(token)
res.send(({
code: 403,
message: '无权限'
}))
}
})

sql语句建表:

DROP TABLE IF EXISTS `upload`;
CREATE TABLE `upload` (
`uid` varchar(100) COLLATE utf8_unicode_ci NOT NULL COMMENT 'ID',
`path` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT '路径',
`originalname` varchar(1000) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT '原始文件名',
`create_time` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT '创建时间',
PRIMARY KEY (`uid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

 

 

 

 

 

 

 

 

 

 


举报

相关推荐

0 条评论