Fork me on GitHub

使用Antd Upload组件上传文件到七牛

使用Upload组件将文件上传到七牛

需求大概是这样的,我们需要使用AntdUpload组件将上传的文件传到七牛云上面,然后让七牛那边返回一个url即可。

结合了一下之前写过的关于七牛那边的Node SDK.

大概是这样一个操作:

  • 先获取到七牛那边的一个token值
  • 然后将文件上传到七牛那边提供的一个url上面(一个post接口,要附带token提交上去)
  • 拿到返回的url地址

这里使用的框架是react,版本号是16.9.0.

先安装一波依赖

1
npm install qiniu -S

然后新建一个qiniu.js的文件,用来得到七牛那边的token

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import qiniu from 'qiniu';
import { Qiniu } from '../../secret';
qiniu.conf.ACCESS_KEY = Qiniu.AK;
qiniu.conf.SECRET_KEY = Qiniu.SK;
// 七牛那边的对应的bucket名称
const bucket = '';
export const getToken = () => {
const putPolicy = new qiniu.rs.PutPolicy({
scope: bucket
})
return putPolicy.uploadToken();
}

然后相对应的secret.js用来存储个人七牛的仓库的SKAK

其中secret.js的代码大致为这样(相关的SK和AK已屏蔽):

1
2
3
4
export const Qiniu = {
AK:'',
SK:''
}

这个文件上传的时候放在.gitignore里面就可以了。或者项目有CI支持的话,可以先用CI对文件进行一个加密也可以。

过程大概是这样,在使用upload进行组件的上传的时候,先使用beforeUpload获取到本次上传所需要的token值,然后把token填在上传的data里面,然后上传到七牛对应的QINIU_SERVER那边去,这样最后那边上传之后返回的url

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, { useState, Fragment } from "react";
import { Form, Upload, Modal, Icon } from "antd";
import { getToken } from "utils/qiniu";
// 七牛默认的上传地址
const QINIU_SERVER = "http://upload.qiniup.com";
// bucket绑定的URL
const BASE_QINIU_URL = "";
const FormItem = Form.Item;
function Demo(props) {
const { getFieldDecorator } = props.form;
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState("");
const [token, setToken] = useState("");
const [fileList, setFileList] = useState([]);
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
}
};
const handlePreview = file => {
setPreviewImage(file.url || file.thumbUrl);
setPreviewVisible(true);
};
const handleChange = ({ file, fileList }) => {
const { uid, name, type, thumbUrl, status, response = {} } = file;
const fileItem = {
uid,
name,
type,
thumbUrl,
status,
url: BASE_QINIU_URL + (response.hash || "")
};
fileList.pop();
fileList.push(fileItem);
// 这个地方必须要用展开运算符,不然会有bug
setFileList([...fileList]);
};
const getUploadToken = () => {
const token = getToken();
setToken(token);
};
const uploadButton = (
<div>
<Icon type="plus" />
<div className="ant-upload-text">上传</div>
</div>
);
return (
<Fragment>
<Form>
<FormItem label="上传文件 " {...formItemLayout}>
{getFieldDecorator("scwj", {
rules: [
{
required: false
}
]
})(
<>
<Upload
action={QINIU_SERVER}
data={{ token }}
listType="picture-card"
beforeUpload={getUploadToken}
fileList={fileList}
onPreview={handlePreview}
onChange={handleChange}
>
{fileList.length >= 1 ? null : uploadButton}
</Upload>
</>
)}
</FormItem>
</Form>
<Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
<img style={{ width: "100%" }} src={previewImage} alt="previewImg" />
</Modal>
</Fragment>
);
}
export default Demo;
-------------本文结束感谢您的阅读-------------