我正在集成Google Drive API,用于将文件从HTML表单上传到Google云端硬盘。当我在CorePHP中实现代码( AJAX 和jQuery)时,它工作正常,但在CodeIgniter 4中不工作。问题是由于URL吗?
Web浏览器的控制台显示错误:
404upload.html?code=4/0AX4XfWgb3ql4RL2FfY7RdaL7jgyDOYT3CztsruXIbiLNdziDJKZ_UWFNK3qNzEgdcZrMFQ&scope=https://www.googleapis.com/auth/drive(页面未找到)
文件 index.html(用于登录Google帐户):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Git Login App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div>
<button id="login">
Upload Files to Drive
</button>
</div>
</body>
</html>
文件 main.js(重定向到 upload.html 以将文件上传到Google云端硬盘):
$(document).ready(function() {
// Client id of the project
var clientId = "";
// redirect_uri of the project
var redirect_uri = "http://localhost:8080/upload.html";
// Scope of the project
var scope = "https://www.googleapis.com/auth/drive";
// The URL to which the user is redirected to
var url = "";
// This is event click listener for the button
$("#login").click(function() {
// This is the method which will be invoked it takes four parameters
signIn(clientId, redirect_uri, scope, url);
});
function signIn(clientId, redirect_uri, scope, url) {
// The actual URL to which the user is redirected to
url = "https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=" + redirect_uri +
"&prompt=consent&response_type=code&client_id=" + clientId + "&scope=" + scope +
"&access_type=offline";T
// This line makes the user redirected to the URL
window.location = url;
}
});
文件 * 上传.html*:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Git Login App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="upload.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="upload.js"></script>
</head>
<body>
<div>
<input id="files" type="file" name="files[]" multiple/>
<button id="upload">Upload</button>
<div id="progress-wrp">
<div class="progress-bar"></div>
<div class="status">0%</div>
</div>
</div>
<div id="result">
</div>
</body>
</html>
文件 * 上传.js*:
$(document).ready(function() {
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');
const redirect_uri = "http://localhost:8080/upload.html" // Replace with your redirect_uri;
const client_secret = ""; // Replace with your client secret
const scope = "https://www.googleapis.com/auth/drive";
var access_token = "";
var client_id = "" // Replace it with your client id;
$.ajax({
type: 'POST',
url: "https://www.googleapis.com/oauth2/v4/token",
data: {code: code,
redirect_uri: redirect_uri,
client_secret: client_secret,
client_id: client_id,
scope: scope,
grant_type: "authorization_code"},
dataType: "json",
success: function(resultData) {
localStorage.setItem("accessToken", resultData.access_token);
localStorage.setItem("refreshToken", resultData.refreshToken);
localStorage.setItem("expires_in", resultData.expires_in);
window.history.pushState({}, document.title, "/GitLoginApp/" + "upload.html");
}
});
function stripQueryStringAndHashFromPath(url) {
return url.split("?")[0].split("#")[0];
}
var Upload = function (file) {
this.file = file;
};
Upload.prototype.getType = function() {
localStorage.setItem("type", this.file.type);
return this.file.type;
};
Upload.prototype.getSize = function() {
localStorage.setItem("size", this.file.size);
return this.file.size;
};
Upload.prototype.getName = function() {
return this.file.name;
};
Upload.prototype.doUpload = function () {
var that = this;
var formData = new FormData();
// Add assoc key values. This will be posts values
formData.append("file", this.file, this.getName());
formData.append("upload_file", true);
$.ajax({
type: "POST",
beforeSend: function(request) {
request.setRequestHeader("Authorization", "Bearer" + " " + localStorage.getItem("accessToken"));
},
url: "https://www.googleapis.com/upload/drive/v2/files",
data:{
uploadType: "media"
},
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', that.progressHandling, false);
}
return myXhr;
},
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(error);
},
async: true,
data: formData,
cache: false,
contentType: false,
processData: false,
timeout: 60000
});
};
Upload.prototype.progressHandling = function (event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
var progress_bar_id = "#progress-wrp";
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
// Update progressbars classes so it fits your code
$(progress_bar_id + " .progress-bar").css("width", +percent + "%");
$(progress_bar_id + " .status").text(percent + "%");
};
$("#upload").on("click", function (e) {
var file = $("#files")[0].files[0];
var upload = new Upload(file);
// Maybe check size or type here with upload.getSize() and upload.getType()
// Execute upload
upload.doUpload();
});
});
我是新来的代码点火器4。
2条答案
按热度按时间1mrurvl11#
如果你认为php版本和.htaccess设置是正确的..尝试在Config/route.php文件中设置自动路由按照https://caramengetahui.com/artikel/read/cara-mengatasi-file-not-found-cant-find-a-route-for-get下面链接中的说明操作
slwdgvem2#
如果服务器无法找到请求的资源,通常会收到 404 Not Found 响应。
HTTP 404
HTTP 404,404 not found,404,404 error,page not found or file not found错误消息是计算机网络通信中的一个超文本传输协议(HTTP)标准响应代码,用于指示浏览器能够与给定服务器通信,但服务器无法找到所请求的内容。
在您的特定情况下,
redirect_uri
指向的GET /upload.html
在您的路由文件(app\Config\Routes.php)中没有明确定义。溶液
在路线文件中定义路线。即:
$routes->get("upload.html", "Home::upload");
其中第一个参数表示 URI,第二个参数表示响应的***Controller***::方法。
您可以使用以下命令获取 * 控制器方法 * 中的查询参数: