摘要:最近在做一個項目,需要在前端對圖片切片并上傳到七牛云技術要點可將保存成二進制文件將二進制文件添加到中上傳數據到后端處理代碼實現目前沒有看到七牛云提供的支持上傳到云上的,所以這里自己實現了一下注意到七牛云的時候不要設置,讓瀏覽器自己處理請求
最近在做一個項目,需要在前端對圖片切片并上傳到七牛云
技術要點canvas.toBlob(blob=>{}); //可將canvas保存成二進制文件
formData.append("file", blob, "filename"); //將二進制文件添加到FormData中
ajax.send(formData); //上傳數據到后端處理
代碼實現目前沒有看到七牛云提供的JSSDK支持上傳blob到云上的, 所以這里自己實現了一下
注意ajax post formData到七牛云的時候不要設置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("請求失敗:" + ajax.status)) } } }; ajax.send(options.data); } else { reject(new Error("創建Ajax請求失敗!")); } }); } 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 => { //注意不要設置content-type,瀏覽器自動會填充 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");
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91977.html
摘要:以下中使用瀏覽器端上傳圖片到七牛云,下面只是做一些簡單的流程實例。你的控制器地址請求成功之后,調用剛剛寫好的方法,把傳入過去讓頁面初始化的時候就請求這里差不多就可以啦,更多的操作參考文檔七牛云官方文檔 以下Laravel中使用瀏覽器端上傳圖片到七牛云,下面只是做一些簡單的流程實例。詳情請看官方文檔七牛云官方js文檔 1. 首先引入相應的js文件,下面是通過CDN引入的Staticfi...
摘要:以下中使用瀏覽器端上傳圖片到七牛云,下面只是做一些簡單的流程實例。你的控制器地址請求成功之后,調用剛剛寫好的方法,把傳入過去讓頁面初始化的時候就請求這里差不多就可以啦,更多的操作參考文檔七牛云官方文檔 以下Laravel中使用瀏覽器端上傳圖片到七牛云,下面只是做一些簡單的流程實例。詳情請看官方文檔七牛云官方js文檔 1. 首先引入相應的js文件,下面是通過CDN引入的Staticfi...
摘要:基于七牛云存儲官方構建。使用此構建您的網絡應用程序,能讓您以非常便捷地方式將數據安全地存儲到七牛云存儲上。應用接入獲取和要接入七牛云存儲,您需要擁有一對有效的和用來進行簽名認證。文件下載七牛云存儲上的資源下載分為公有資源下載和私有資源下載。 此 SDK 適用于 PHP 5.1.0 及其以上版本。基于 七牛云存儲官方API 構建。使用此 SDK 構建您的網絡應用程序,能讓您以非常便捷地方...
摘要:因為升級到新的版本,之前的通過很多上傳圖片的方式都已經不適用了,所以自己就寫了一個對于上傳圖片的小記錄一下心得。 因為升級到新的node版本,之前的通過很多上傳圖片的方式都已經不適用了,所以自己就寫了一個對于 koa2上傳圖片的小demo,記錄一下心得。 廢話不多說,下面直接上代碼,里面都有注釋。 const Koa = require(koa); const route = requ...
閱讀 2132·2023-04-26 03:06
閱讀 3580·2023-04-26 01:51
閱讀 2086·2021-11-24 09:38
閱讀 2452·2021-11-17 17:00
閱讀 2324·2021-09-28 09:36
閱讀 941·2021-09-24 09:47
閱讀 2587·2019-08-30 15:54
閱讀 1554·2019-08-30 15:44