So verwenden Sie die PC-API zum Hoch- und Herunterladen von Dateien in das kostenlose Baidu-Netzwerk disk_javascript-Kenntnisse

Die persönliche Cloud-Festplatte von Baidu bietet viel Speicherplatz, ist völlig kostenlos und bietet eine PCS-API zum Aufrufen und Bedienen von Dateien. Es ist sehr praktisch, einige Dateien in täglichen Projekten zu speichern.

Umgebungsvorbereitung:

Aktivieren Sie Lese- und Schreibberechtigungen für Netzwerkfestplatten und erhalten Sie ein Zugriffstoken: http://blog.csdn.net/langyuezhang/article/details/47206621

Offizielles Baidu-API-Dokument: http://developer.baidu.com/wiki/index.php?title=docs/pcs/overview. Ich verwende Laravel5 und importiere es direkt SDK kann noch nicht verwendet werden. Es muss leicht geändert werden, bevor es verwendet werden kann.

Nachdem Sie die beiden oben genannten Artikel gelesen haben, können Sie im Grunde die folgende API verwenden, um das vom Benutzer ausgewählte Bild direkt in der Vorschau anzuzeigen und auf die Netzwerkfestplatte hochzuladen:
https://pcs.baidu.com/rest/2.0/pcs/file?method=upload&path=%2fapps%2wp2pcs%2f1.JPG&access_token=***Der rote Teil ist behoben, da tatsächlich nur das Hochladen in dieses Verzeichnis erlaubt ist , Das dem Netzwerkdatenträger entsprechende Verzeichnis ist „My Network Disk/My Application Data/wp2pcs“. Es ist nicht erforderlich, vor dem Hochladen von Dateien ein Verzeichnis zu erstellen. Es wird beispielsweise automatisch erstellt Ich möchte Bilder nach /apps/wp2pcs/ hochladen. Geben Sie unter img einfach /apps/wp2pcs/img/1.jpg als Pfad ein. Im Folgenden finden Sie den Code zum Hochladen des vom Benutzer auf der Webseite ausgewählten Bildes direkt auf die Netzwerkfestplatte nach der Vorschau, bezogen auf das Beispiel im Internet: Vorschau:

//图片上传预览 IE是用了滤镜。
function previewImage(file, product)
{
getPhotopty();
console.log("previewImage");
uploadAndSubmit(product);
var div = document.getElementById('preview' + product);
var fileName = file.value;
//upload();
if (file.files)
{
var i = 0;
var funAppendImage = function () {
var _file = file.files[i];
if (_file) {
var reader = new FileReader()
reader.onload = function (evt) {
fileName = _file.name;
div.innerHTML += '<div class="col-xs-6 col-md-3"><a style="float:right;cursor:pointer;" onclick="del(this)">X</a><div class="thumbnail"><img  id=imghead' + product + fileName + ' alt="So verwenden Sie die PC-API zum Hoch- und Herunterladen von Dateien in das kostenlose Baidu-Netzwerk disk_javascript-Kenntnisse" ></div></div>';
var img = document.getElementById('imghead' + product + fileName);
img.src = evt.target.result;
i++;
funAppendImage();
}
reader.readAsDataURL(_file);
}
};
funAppendImage();
}
$('#coverBg').show();
$('#coverDiv').show();
//$("#uploadFrm" + product).submit();
}

Hochladen:

var access_token = "***********";
var baseUrl = "https://c.pcs.baidu.com/rest/2.0/pcs/";
function uploadAndSubmit(product) {
console.log("start uploadAndSubmit");
if (typeof FileReader == 'undefined') {
alert("你的浏览器不支持FileReader接口！");
}
var taskName = $("#txtTask").val() + "-" + $("#txtTask2").val();
var form = document.forms["uploadFrm" + product];
console.log("form:" + form);
var fileCtrl = "filectrl" + product;
console.log("filectrl:" + fileCtrl);
//if (form[fileCtrl].files.length > 0)
console.log($("#filectrl" + product)[0]);
if ($("#filectrl" + product)[0].files.length > 0)
{
for (var i = 0; i < $("#filectrl" + product)[0].files.length; i++)
{
var file = form[fileCtrl].files[i];
console.log(file.name);
var filePath = "%2fapps%2fwp2pcs%2f" + taskName + "%2f" + file.name;
console.log("add exif info to db");
getExifIinfo(taskName, file, product, filePath);
//document.getElementById("bytesRead").textContent = file.size;
console.log("start XMLHttpRequest");
var xhr = new XMLHttpRequest();
console.log(access_token);
var url = baseUrl + "file&#63;method=upload&path=%2fapps%2fwp2pcs%2f" + taskName + "%2f" + file.name + "&access_token=" + access_token + "&ondup=overwrite&count=" + i;
console.log(url);
xhr.open("POST", url, true);
var formData = new FormData();
formData.append("file", file);
console.log("onreadystatechange");
xhr.onreadystatechange = function () {
console.log("onreadystatechange start");
//console.log(xhr.status);
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log("upload complete");
console.log("response: " + xhr.responseText);
var result = $.parseJSON(xhr.responseText);
if (result.hasOwnProperty("path"))
{
$("#reusltMsg").append('<div class="alert alert-success" role="alert"> 上传成功.</div>');
} else
{
$("#reusltMsg").append('<div class="alert alert-danger" role="alert"> 上传失败.</div>');
}
} else
{
$("#reusltMsg").append('<div class="alert alert-danger" role="alert"> 上传失败(200).</div>');
}
}
$('#coverBg').hide();
$('#coverDiv').hide();
}
xhr.send(formData);
}
} else
{
alert("Please choose a file.");
$('#coverBg').hide();
$('#coverDiv').hide();
}
}