Comment utiliser l'API pcs pour télécharger et télécharger des fichiers afin de libérer les compétences disk_javascript du réseau Baidu

Le disque cloud personnel Baidu dispose d'un grand espace, est entièrement gratuit et fournit une API PCS pour appeler et exploiter des fichiers. Il est très pratique de sauvegarder certains fichiers dans des projets quotidiens.

Préparation de l'environnement :

Activez les autorisations de lecture et d'écriture sur le disque réseau et obtenez un access_token : http://blog.csdn.net/langyuezhang/article/details/47206621

Document officiel de l'API pcs de Baidu : http://developer.baidu.com/wiki/index.php?title=docs/pcs/overview Il existe des SDK dans différentes langues. J'utilise laravel5 et je l'importe directement. Le SDK ne peut pas encore être utilisé. Il doit être légèrement modifié avant de pouvoir être utilisé.

Après avoir lu les deux articles ci-dessus, vous pouvez essentiellement l'utiliser. Voici l'API pour prévisualiser directement l'image sélectionnée par l'utilisateur et la télécharger sur le disque réseau :
https://pcs.baidu.com/rest/2.0/pcs/file?method=upload&path=/apps%2wp2pcs/1.JPG&access_token=***La partie rouge est corrigée car seul le téléchargement vers ce répertoire est en fait autorisé. Le répertoire correspondant au disque réseau est My Network Disk/My Application Data/wp2pcs. Il n'est pas nécessaire de créer un répertoire avant de télécharger les fichiers. Il vous suffit de spécifier le chemin et il sera créé automatiquement, par exemple. téléchargez des images dans /apps/wp2pcs/ Sous img, écrivez simplement /apps/wp2pcs/img/1.jpg comme chemin. Voici le code pour télécharger l'image sélectionnée par l'utilisateur sur la page Web directement sur le disque réseau après l'avoir prévisualisée, en vous référant à l'exemple sur Internet : Aperçu :

//图片上传预览 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 + '></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();
}

Télécharger :

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();
}
}