資訊專欄INFORMATION COLUMN
摘要：最近在做一個(gè)項(xiàng)目，需要在前端對(duì)圖片切片并上傳到七牛云技術(shù)要點(diǎn)可將保存成二進(jìn)制文件將二進(jìn)制文件添加到中上傳數(shù)據(jù)到后端處理代碼實(shí)現(xiàn)目前沒有看到七牛云提供的支持上傳到云上的，所以這里自己實(shí)現(xiàn)了一下注意到七牛云的時(shí)候不要設(shè)置，讓瀏覽器自己處理請(qǐng)求
最近在做一個(gè)項(xiàng)目，需要在前端對(duì)圖片切片并上傳到七牛云
技術(shù)要點(diǎn)canvas.toBlob(blob=>{}); //可將canvas保存成二進(jìn)制文件
formData.append("file", blob, "filename"); //將二進(jìn)制文件添加到FormData中
ajax.send(formData); //上傳數(shù)據(jù)到后端處理
代碼實(shí)現(xiàn)目前沒有看到七牛云提供的JSSDK支持上傳blob到云上的， 所以這里自己實(shí)現(xiàn)了一下
注意ajax post formData到七牛云的時(shí)候不要設(shè)置content-type，讓瀏覽器自己處理
class Qiniu {
constructor(options = {}) {
this._options = {...options};
}
ajax(url = "", opt = {}) {
const options = {method: "GET", async: true, dataType: "JSON", ...opt};
return new Promise((resolve, reject) => {
const ajax = this.createAjax();
if (ajax) {
const _async = typeof options.async === "boolean" ? options.async : true;
ajax.open(options.method || "GET", url, _async);
if (options.headers) {
Object.keys(options.headers).forEach(key => {
ajax.setRequestHeader(key, options.headers[key]);
});
}
ajax.onreadystatechange = () => {
if (ajax.readyState === 4) {
if (ajax.status >= 200 && ajax.status <= 400) {
let res = ajax.responseText;
if (options.dataType && options.dataType.toUpperCase() === "JSON") {
res = JSON.parse(res);
}
resolve(res, ajax.response);
} else {
reject(new Error("請(qǐng)求失敗:" + ajax.status))
}
}
};
ajax.send(options.data);
} else {
reject(new Error("創(chuàng)建Ajax請(qǐng)求失?。?));
}
});
}
createAjax() {
let xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
getToken() {
if (this._options.token) {
return Promise.resolve(this._options.token);
} else {
if (typeof this._options.getToken === "function") {
const t = this._options.getToken();
if (t && typeof t.then === "function") {
return t.then(token => {
this._options.token = token;
return token;
})
} else if (typeof t === "string") {
this._options.token = t;
return Promise.resolve(t);
} else {
return Promise.reject(new Error("options.getToken必須返回Promise或string token"));
}
} else if (typeof this._options.getTokenUrl === "string") {
return this.ajax(this._options.getTokenUrl, {
headers: {
authorization: this._options.authorization
}
}).then(res => {
this._options.token = res.uptoken;
return this._options.token;
}).catch(ex => {
throw new Error("獲取uptoken失敗:" + ex.message);
});
} else {
return Promise.reject(new Error("無法獲取token"));
}
}
}
upload(file, filename, key) {
return this.getToken().then(token => {
const formData = new FormData();
formData.append("key", key || filename);
formData.append("token", token);
formData.append("file", file, filename);
return formData;
}).then(data => {
//注意不要設(shè)置content-type,瀏覽器自動(dòng)會(huì)填充
return this.ajax("http://upload.qiniu.com/", {
method: "POST",
data,
});
});
}
}
canvas.toBlob(blob => {
const filename = Date.now() + Math.random() + ".png";
const qiniu = new Qiniu({getTokenUrl:"這里寫獲取七牛token的接口地址"});
qiniu.upload(blob, filename);
}, "image/png");
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91977.html
摘要：以下中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實(shí)例。你的控制器地址請(qǐng)求成功之后，調(diào)用剛剛寫好的方法，把傳入過去讓頁面初始化的時(shí)候就請(qǐng)求這里差不多就可以啦，更多的操作參考文檔七牛云官方文檔 以下Laravel中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實(shí)例。詳情請(qǐng)看官方文檔七牛云官方j(luò)s文檔 1. 首先引入相應(yīng)的js文件，下面是通過CDN引入的Staticfi...
摘要：以下中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實(shí)例。你的控制器地址請(qǐng)求成功之后，調(diào)用剛剛寫好的方法，把傳入過去讓頁面初始化的時(shí)候就請(qǐng)求這里差不多就可以啦，更多的操作參考文檔七牛云官方文檔 以下Laravel中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實(shí)例。詳情請(qǐng)看官方文檔七牛云官方j(luò)s文檔 1. 首先引入相應(yīng)的js文件，下面是通過CDN引入的Staticfi...
摘要：基于七牛云存儲(chǔ)官方構(gòu)建。使用此構(gòu)建您的網(wǎng)絡(luò)應(yīng)用程序，能讓您以非常便捷地方式將數(shù)據(jù)安全地存儲(chǔ)到七牛云存儲(chǔ)上。應(yīng)用接入獲取和要接入七牛云存儲(chǔ)，您需要擁有一對(duì)有效的和用來進(jìn)行簽名認(rèn)證。文件下載七牛云存儲(chǔ)上的資源下載分為公有資源下載和私有資源下載。 此 SDK 適用于 PHP 5.1.0 及其以上版本?；?七牛云存儲(chǔ)官方API 構(gòu)建。使用此 SDK 構(gòu)建您的網(wǎng)絡(luò)應(yīng)用程序，能讓您以非常便捷地方...
摘要：因?yàn)樯?jí)到新的版本，之前的通過很多上傳圖片的方式都已經(jīng)不適用了，所以自己就寫了一個(gè)對(duì)于上傳圖片的小記錄一下心得。 因?yàn)樯?jí)到新的node版本，之前的通過很多上傳圖片的方式都已經(jīng)不適用了，所以自己就寫了一個(gè)對(duì)于 koa2上傳圖片的小demo,記錄一下心得。 廢話不多說，下面直接上代碼，里面都有注釋。 const Koa = require(koa); const route = requ...
閱讀 2280·2023-04-26 03:06
閱讀 3699·2023-04-26 01:51
閱讀 2155·2021-11-24 09:38
閱讀 2569·2021-11-17 17:00
閱讀 2422·2021-09-28 09:36
閱讀 1007·2021-09-24 09:47
閱讀 2679·2019-08-30 15:54
閱讀 1621·2019-08-30 15:44
