导入import OSS from 'ali-oss';
//通过查询资料发现浏览器有监听用户粘贴的原生事件,所以在组件挂载的时候就注册监听,在组件卸载时移除监听。
componentDidMount() {
document.addEventListener('paste', this.handlePasteMonitor);
componentWillUnmount() {
document.removeEventListener('paste', this.handlePasteMonitor);
//上传图片
handlePasteMonitor = (e) => {
/** 获取剪切板的数据clipboardData */
var clipboardData = e.clipboardData,
i = 0,
items, item, types;
/** 为空判断 */
if (clipboardData) {
items = clipboardData.items;
if (!items) {
return;
item = items[0];
types = clipboardData.types || [];
/** 遍历剪切板的数据 */
for (; i < types.length; i++) {
if (types[i] === 'Files') {
item = items[i];
break;
/** 判断文件是否为图片 */
if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
const file = item.getAsFile();
let client = new OSS({
region: 'xxxxxxxxx',
accessKeyId: t'xxxxxxxxx',
accessKeySecret: 'xxxxxxxxx',
stsToken: 'xxxxxxxxx',
bucket: 'xxxxxxxxx',
let fileName = 'webManage/' + moment().valueOf() + md5(file.name) + Math.floor(Math.random(0, 100) * 10);
client.multipartUpload(fileName, file).then(res => {
//上传阿里云成功,获取文件名走后台接口获取临时路径 访问
message.success(file.name + '上传成功')
let src = app.fileUrl + res.name