我对文档有点困惑。我做了我的研究,资源很少。也许有人可以帮助我。我正在使用 CRNA - create-react-app。我有一个按钮,可以使用 URI 将文件上传到 Google Drive。我已经有了 API 密钥、客户端 ID、启用 API(例如 Drive api)等初始步骤。我设法让 Google Picker 工作。但 Google Drive 上传却没有成功。
有一个嵌入 UI 的“保存到驱动器”按钮。只需复制粘贴,即可在纯 HTML 中工作。但我需要的是创建我自己的方法来执行上传过程。谢谢你们。
请使用以下步骤,希望对您有所帮助:
- 添加套餐
yarn add react-google-picker
进入你的项目,打包链接在这里 https://www.npmjs.com/package/react-google-picker
- 准备好您的 Google 开发者密钥、客户端 IDhttps://console.developers.google.com https://console.developers.google.com
- 实现如下代码:
注意:不要忘记使用以下代码中的密钥更改“YOUR_DEVELOPER_KEY_HERE”、“YOUR_CLIENT_ID_HERE”:
import React, {Component} from 'react';
import GooglePicker from 'react-google-picker';
class MyPage extends Component{
render(){
return (
<GooglePicker clientId={'YOUR_CLIENT_ID_HERE'}
developerKey={'YOUR_DEVELOPER_KEY_HERE'}
scope={['https://www.googleapis.com/auth/drive.readonly']}
onChange={data => console.log('on change:', data)}
onAuthFailed={data => console.log('on auth failed:', data)}
multiselect={true}
navHidden={true}
authImmediate={false}
viewId={'DOCS'}
mimeTypes={['image/png', 'image/jpeg', 'image/jpg']}
createPicker={ (google, oauthToken) => {
const googleViewId = google.picker.ViewId.DOCS;
const uploadView = new google.picker.DocsUploadView();
const docsView = new google.picker.DocsView(googleViewId)
.setIncludeFolders(true)
.setSelectFolderEnabled(true);
const picker = new window.google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.SIMPLE_UPLOAD_ENABLED)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.addView(docsView)
.addView(uploadView)/*DocsUploadView added*/
.setOAuthToken(oauthToken)
.setDeveloperKey('YOUR_DEVELOPER_KEY_HERE')
.setCallback((data)=>{
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
alert('The user selected: ' + fileId);
picker();
}
});
picker.build().setVisible(true);
}}>
<span>Click here</span>
<div className="google"></div>
</GooglePicker>
);
}
}
export default MyPage
这就是它的样子;)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)