mirror of
https://github.com/cloudreve/frontend.git
synced 2025-12-25 19:52:48 +00:00
修复：图像预览跨域
This commit is contained in:
HFO4
parent
1a0bf31ab6
commit
99925b0bd4
|
|
@ -1223,61 +1223,6 @@ function getCookieByString(cookieName) {
|
|||
|
||||
logger.debug("bind UploadProgress event");
|
||||
|
||||
// bind 'ChunkUploaded' event
|
||||
// store the chunk upload info and set next chunk upload url
|
||||
uploader.bind("ChunkUploaded", function(up, file, info) {
|
||||
logger.debug("ChunkUploaded event activated");
|
||||
logger.debug("file: ", file);
|
||||
logger.debug("info: ", info);
|
||||
var res = that.parseJSON(info.response);
|
||||
logger.debug("res: ", res);
|
||||
// ctx should look like '[chunk01_ctx],[chunk02_ctx],[chunk03_ctx],...'
|
||||
ctx = ctx ? ctx + "," + res.ctx : res.ctx;
|
||||
var leftSize = info.total - info.offset;
|
||||
var chunk_size = up.getOption && up.getOption("chunk_size");
|
||||
chunk_size =
|
||||
chunk_size || (up.settings && up.settings.chunk_size);
|
||||
if (leftSize < chunk_size) {
|
||||
up.setOption({
|
||||
url: qiniuUploadUrl + "/mkblk/" + leftSize
|
||||
});
|
||||
if (uploadConfig.saveType == "remote") {
|
||||
up.setOption({
|
||||
url: qiniuUploadUrl + "chunk.php"
|
||||
});
|
||||
}
|
||||
logger.debug(
|
||||
"up.setOption url: ",
|
||||
qiniuUploadUrl + "/mkblk/" + leftSize
|
||||
);
|
||||
}
|
||||
if (uploadConfig.saveType == "remote") {
|
||||
up.setOption({
|
||||
headers: {
|
||||
Authorization: getUptoken(file)
|
||||
}
|
||||
});
|
||||
} else {
|
||||
up.setOption({
|
||||
headers: {
|
||||
Authorization: "UpToken " + getUptoken(file)
|
||||
}
|
||||
});
|
||||
}
|
||||
localStorage.setItem(
|
||||
file.name,
|
||||
that.stringifyJSON({
|
||||
ctx: ctx,
|
||||
percent: file.percent,
|
||||
total: info.total,
|
||||
offset: info.offset,
|
||||
time: new Date().getTime()
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
logger.debug("bind ChunkUploaded event");
|
||||
|
||||
var retries = qiniuUploadUrls.length;
|
||||
|
||||
// if error is unkown switch upload url and retry
|
||||
|
|
@ -1396,9 +1341,6 @@ function getCookieByString(cookieName) {
|
|||
} else {
|
||||
errTip = "未知错误";
|
||||
}
|
||||
if (!unknow_error_retry(file)) {
|
||||
return;
|
||||
}
|
||||
break;
|
||||
}
|
||||
break;
|
||||
|
|
@ -1417,9 +1359,6 @@ function getCookieByString(cookieName) {
|
|||
break;
|
||||
default:
|
||||
errTip = err.message + err.details;
|
||||
if (!unknow_error_retry(file)) {
|
||||
return;
|
||||
}
|
||||
break;
|
||||
}
|
||||
if (_Error_Handler) {
|
||||
|
|
@ -1447,67 +1386,7 @@ function getCookieByString(cookieName) {
|
|||
if (uploadConfig.saveType == "s3") {
|
||||
}
|
||||
var last_step = function(up, file, info) {
|
||||
if (op.downtoken_url) {
|
||||
// if op.dowontoken_url is not empty
|
||||
// need get downtoken before invoke the _FileUploaded_Handler
|
||||
var ajax_downtoken = that.createAjax();
|
||||
ajax_downtoken.open(
|
||||
"POST",
|
||||
op.downtoken_url,
|
||||
true
|
||||
);
|
||||
ajax_downtoken.setRequestHeader(
|
||||
"Content-type",
|
||||
"application/x-www-form-urlencoded"
|
||||
);
|
||||
ajax_downtoken.onreadystatechange = function() {
|
||||
if (ajax_downtoken.readyState === 4) {
|
||||
if (
|
||||
ajax_downtoken.status === 200 ||
|
||||
ajax_downtoken.status === 204 ||
|
||||
ajax_downtoken.status === 303
|
||||
) {
|
||||
var res_downtoken;
|
||||
try {
|
||||
res_downtoken = that.parseJSON(
|
||||
ajax_downtoken.responseText
|
||||
);
|
||||
} catch (e) {
|
||||
throw "invalid json format";
|
||||
}
|
||||
var info_extended = {};
|
||||
plupload.extend(
|
||||
info_extended,
|
||||
that.parseJSON(info),
|
||||
res_downtoken
|
||||
);
|
||||
if (_FileUploaded_Handler) {
|
||||
_FileUploaded_Handler(
|
||||
up,
|
||||
file,
|
||||
that.stringifyJSON(
|
||||
info_extended
|
||||
)
|
||||
);
|
||||
}
|
||||
} else {
|
||||
uploader.trigger("Error", {
|
||||
status: ajax_downtoken.status,
|
||||
response:
|
||||
ajax_downtoken.responseText,
|
||||
file: file,
|
||||
code: plupload.HTTP_ERROR
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
ajax_downtoken.send(
|
||||
"key=" +
|
||||
that.parseJSON(info).key +
|
||||
"&domain=" +
|
||||
op.domain
|
||||
);
|
||||
} else if (_FileUploaded_Handler) {
|
||||
if (_FileUploaded_Handler) {
|
||||
_FileUploaded_Handler(up, file, info);
|
||||
}
|
||||
};
|
||||
|
|
@ -1527,169 +1406,7 @@ function getCookieByString(cookieName) {
|
|||
// else
|
||||
// invalke the last_step
|
||||
logger.debug("ctx: ", ctx);
|
||||
if (ctx) {
|
||||
var key = "";
|
||||
logger.debug("save_key: ", op.save_key);
|
||||
if (!op.save_key) {
|
||||
key = getFileKey(up, file, that.key_handler);
|
||||
key = key
|
||||
? "/key/" + that.URLSafeBase64Encode(key)
|
||||
: "";
|
||||
}
|
||||
|
||||
var fname =
|
||||
"/fname/" + that.URLSafeBase64Encode(file.name);
|
||||
if (uploadConfig.saveType == "remote") {
|
||||
if (!op.save_key) {
|
||||
key = getFileKey(
|
||||
up,
|
||||
file,
|
||||
that.key_handler
|
||||
);
|
||||
key = key
|
||||
? that.URLSafeBase64Encode(key)
|
||||
: "";
|
||||
}
|
||||
fname =
|
||||
"" + that.URLSafeBase64Encode(file.name);
|
||||
op.x_vars = {
|
||||
path: file.path
|
||||
};
|
||||
}
|
||||
logger.debug("op.x_vars: ", op.x_vars);
|
||||
if (uploadConfig.saveType == "qiniu") {
|
||||
op.x_vars = {
|
||||
path: file.path
|
||||
};
|
||||
}
|
||||
var x_vars = op.x_vars,
|
||||
x_val = "",
|
||||
x_vars_url = "";
|
||||
if (
|
||||
x_vars !== undefined &&
|
||||
typeof x_vars === "object"
|
||||
) {
|
||||
for (var x_key in x_vars) {
|
||||
if (x_vars.hasOwnProperty(x_key)) {
|
||||
if (
|
||||
typeof x_vars[x_key] === "function"
|
||||
) {
|
||||
x_val = that.URLSafeBase64Encode(
|
||||
x_vars[x_key](up, file)
|
||||
);
|
||||
} else if (
|
||||
typeof x_vars[x_key] !== "object"
|
||||
) {
|
||||
x_val = that.URLSafeBase64Encode(
|
||||
x_vars[x_key]
|
||||
);
|
||||
}
|
||||
x_vars_url +=
|
||||
"/x:" + x_key + "/" + x_val;
|
||||
}
|
||||
}
|
||||
}
|
||||
local_path = "";
|
||||
if (
|
||||
uploadConfig.saveType == "local" ||
|
||||
uploadConfig.saveType == "onedrive"
|
||||
) {
|
||||
pathTmp = file.path;
|
||||
if (file.path == "") {
|
||||
pathTmp = "ROOTDIR";
|
||||
}
|
||||
local_path =
|
||||
"/path/" +
|
||||
that.URLSafeBase64Encode(pathTmp);
|
||||
}
|
||||
if (uploadConfig.saveType == "remote") {
|
||||
pathTmp = file.path;
|
||||
local_path = that.URLSafeBase64Encode(pathTmp);
|
||||
var url =
|
||||
qiniuUploadUrl +
|
||||
"mkfile.php?size=" +
|
||||
file.size +
|
||||
"&key=" +
|
||||
key +
|
||||
"&fname=" +
|
||||
fname +
|
||||
"&path=" +
|
||||
local_path;
|
||||
} else {
|
||||
var url =
|
||||
qiniuUploadUrl +
|
||||
"/mkfile/" +
|
||||
file.size +
|
||||
key +
|
||||
fname +
|
||||
x_vars_url +
|
||||
local_path;
|
||||
}
|
||||
var ie = that.detectIEVersion();
|
||||
var ajax;
|
||||
if (ie && ie <= 9) {
|
||||
ajax = new moxie.xhr.XMLHttpRequest();
|
||||
moxie.core.utils.Env.swf_url = op.flash_swf_url;
|
||||
} else {
|
||||
ajax = that.createAjax();
|
||||
}
|
||||
ajax.open("POST", url, true);
|
||||
ajax.setRequestHeader(
|
||||
"Content-Type",
|
||||
"text/plain;charset=UTF-8"
|
||||
);
|
||||
if (uploadConfig.saveType == "remote") {
|
||||
ajax.setRequestHeader(
|
||||
"Authorization",
|
||||
that.token
|
||||
);
|
||||
} else {
|
||||
ajax.setRequestHeader(
|
||||
"Authorization",
|
||||
"UpToken " + that.token
|
||||
);
|
||||
}
|
||||
var onreadystatechange = function() {
|
||||
logger.debug(
|
||||
"ajax.readyState: ",
|
||||
ajax.readyState
|
||||
);
|
||||
if (ajax.readyState === 4) {
|
||||
localStorage.removeItem(file.name);
|
||||
var info;
|
||||
if (ajax.status === 200) {
|
||||
info = ajax.responseText;
|
||||
logger.debug(
|
||||
"mkfile is success: ",
|
||||
info
|
||||
);
|
||||
last_step(up, file, info);
|
||||
} else {
|
||||
info = {
|
||||
status: ajax.status,
|
||||
response: ajax.responseText,
|
||||
file: file,
|
||||
code: -200,
|
||||
responseHeaders: ajax.getAllResponseHeaders()
|
||||
};
|
||||
logger.debug("mkfile is error: ", info);
|
||||
uploader.trigger("Error", info);
|
||||
}
|
||||
}
|
||||
};
|
||||
if (ie && ie <= 9) {
|
||||
ajax.bind(
|
||||
"readystatechange",
|
||||
onreadystatechange
|
||||
);
|
||||
} else {
|
||||
ajax.onreadystatechange = onreadystatechange;
|
||||
}
|
||||
ajax.send(ctx);
|
||||
logger.debug("mkfile: ", url);
|
||||
} else {
|
||||
last_step(up, file, info.response);
|
||||
}
|
||||
last_step(up, file, info.response);
|
||||
};
|
||||
})(_FileUploaded_Handler)
|
||||
);
|
||||
|
|
@ -1705,267 +1422,6 @@ function getCookieByString(cookieName) {
|
|||
|
||||
return uploader;
|
||||
};
|
||||
|
||||
/**
|
||||
* get url by key
|
||||
* @param {String} key of file
|
||||
* @return {String} url of file
|
||||
*/
|
||||
this.getUrl = function(key) {
|
||||
if (!key) {
|
||||
return false;
|
||||
}
|
||||
key = encodeURI(key);
|
||||
var domain = this.domain;
|
||||
if (domain.slice(domain.length - 1) !== "/") {
|
||||
domain = domain + "/";
|
||||
}
|
||||
return domain + key;
|
||||
};
|
||||
|
||||
/**
|
||||
* invoke the imageView2 api of Qiniu
|
||||
* @param {Object} api params
|
||||
* @param {String} key of file
|
||||
* @return {String} url of processed image
|
||||
*/
|
||||
this.imageView2 = function(op, key) {
|
||||
if (!/^\d$/.test(op.mode)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var mode = op.mode,
|
||||
w = op.w || "",
|
||||
h = op.h || "",
|
||||
q = op.q || "",
|
||||
format = op.format || "";
|
||||
|
||||
if (!w && !h) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var imageUrl = "imageView2/" + mode;
|
||||
imageUrl += w ? "/w/" + w : "";
|
||||
imageUrl += h ? "/h/" + h : "";
|
||||
imageUrl += q ? "/q/" + q : "";
|
||||
imageUrl += format ? "/format/" + format : "";
|
||||
if (key) {
|
||||
imageUrl = this.getUrl(key) + "?" + imageUrl;
|
||||
}
|
||||
return imageUrl;
|
||||
};
|
||||
|
||||
/**
|
||||
* invoke the imageMogr2 api of Qiniu
|
||||
* @param {Object} api params
|
||||
* @param {String} key of file
|
||||
* @return {String} url of processed image
|
||||
*/
|
||||
this.imageMogr2 = function(op, key) {
|
||||
var auto_orient = op["auto-orient"] || "",
|
||||
thumbnail = op.thumbnail || "",
|
||||
strip = op.strip || "",
|
||||
gravity = op.gravity || "",
|
||||
crop = op.crop || "",
|
||||
quality = op.quality || "",
|
||||
rotate = op.rotate || "",
|
||||
format = op.format || "",
|
||||
blur = op.blur || "";
|
||||
//Todo check option
|
||||
|
||||
var imageUrl = "imageMogr2";
|
||||
|
||||
imageUrl += auto_orient ? "/auto-orient" : "";
|
||||
imageUrl += thumbnail ? "/thumbnail/" + thumbnail : "";
|
||||
imageUrl += strip ? "/strip" : "";
|
||||
imageUrl += gravity ? "/gravity/" + gravity : "";
|
||||
imageUrl += quality ? "/quality/" + quality : "";
|
||||
imageUrl += crop ? "/crop/" + crop : "";
|
||||
imageUrl += rotate ? "/rotate/" + rotate : "";
|
||||
imageUrl += format ? "/format/" + format : "";
|
||||
imageUrl += blur ? "/blur/" + blur : "";
|
||||
|
||||
if (key) {
|
||||
imageUrl = this.getUrl(key) + "?" + imageUrl;
|
||||
}
|
||||
return imageUrl;
|
||||
};
|
||||
|
||||
/**
|
||||
* invoke the watermark api of Qiniu
|
||||
* @param {Object} api params
|
||||
* @param {String} key of file
|
||||
* @return {String} url of processed image
|
||||
*/
|
||||
this.watermark = function(op, key) {
|
||||
var mode = op.mode;
|
||||
if (!mode) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var imageUrl = "watermark/" + mode;
|
||||
|
||||
if (mode === 1) {
|
||||
var image = op.image || "";
|
||||
if (!image) {
|
||||
return false;
|
||||
}
|
||||
imageUrl += image
|
||||
? "/image/" + this.URLSafeBase64Encode(image)
|
||||
: "";
|
||||
} else if (mode === 2) {
|
||||
var text = op.text ? op.text : "",
|
||||
font = op.font ? op.font : "",
|
||||
fontsize = op.fontsize ? op.fontsize : "",
|
||||
fill = op.fill ? op.fill : "";
|
||||
if (!text) {
|
||||
return false;
|
||||
}
|
||||
imageUrl += text
|
||||
? "/text/" + this.URLSafeBase64Encode(text)
|
||||
: "";
|
||||
imageUrl += font
|
||||
? "/font/" + this.URLSafeBase64Encode(font)
|
||||
: "";
|
||||
imageUrl += fontsize ? "/fontsize/" + fontsize : "";
|
||||
imageUrl += fill
|
||||
? "/fill/" + this.URLSafeBase64Encode(fill)
|
||||
: "";
|
||||
} else {
|
||||
// Todo mode3
|
||||
return false;
|
||||
}
|
||||
|
||||
var dissolve = op.dissolve || "",
|
||||
gravity = op.gravity || "",
|
||||
dx = op.dx || "",
|
||||
dy = op.dy || "";
|
||||
|
||||
imageUrl += dissolve ? "/dissolve/" + dissolve : "";
|
||||
imageUrl += gravity ? "/gravity/" + gravity : "";
|
||||
imageUrl += dx ? "/dx/" + dx : "";
|
||||
imageUrl += dy ? "/dy/" + dy : "";
|
||||
|
||||
if (key) {
|
||||
imageUrl = this.getUrl(key) + "?" + imageUrl;
|
||||
}
|
||||
return imageUrl;
|
||||
};
|
||||
|
||||
/**
|
||||
* invoke the imageInfo api of Qiniu
|
||||
* @param {String} key of file
|
||||
* @return {Object} image info
|
||||
*/
|
||||
this.imageInfo = function(key) {
|
||||
if (!key) {
|
||||
return false;
|
||||
}
|
||||
var url = this.getUrl(key) + "?imageInfo";
|
||||
var xhr = this.createAjax();
|
||||
var info;
|
||||
var that = this;
|
||||
xhr.open("GET", url, false);
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
info = that.parseJSON(xhr.responseText);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
return info;
|
||||
};
|
||||
|
||||
/**
|
||||
* invoke the exif api of Qiniu
|
||||
* @param {String} key of file
|
||||
* @return {Object} image exif
|
||||
*/
|
||||
this.exif = function(key) {
|
||||
if (!key) {
|
||||
return false;
|
||||
}
|
||||
var url = this.getUrl(key) + "?exif";
|
||||
var xhr = this.createAjax();
|
||||
var info;
|
||||
var that = this;
|
||||
xhr.open("GET", url, false);
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
info = that.parseJSON(xhr.responseText);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
return info;
|
||||
};
|
||||
|
||||
/**
|
||||
* invoke the exif or imageInfo api of Qiniu
|
||||
* according with type param
|
||||
* @param {String} ['exif'|'imageInfo']type of info
|
||||
* @param {String} key of file
|
||||
* @return {Object} image exif or info
|
||||
*/
|
||||
this.get = function(type, key) {
|
||||
if (!key || !type) {
|
||||
return false;
|
||||
}
|
||||
if (type === "exif") {
|
||||
return this.exif(key);
|
||||
} else if (type === "imageInfo") {
|
||||
return this.imageInfo(key);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* invoke api of Qiniu like a pipeline
|
||||
* @param {Array of Object} params of a series api call
|
||||
* each object in array is options of api which name is set as 'fop' property
|
||||
* each api's output will be next api's input
|
||||
* @param {String} key of file
|
||||
* @return {String|Boolean} url of processed image
|
||||
*/
|
||||
this.pipeline = function(arr, key) {
|
||||
var isArray =
|
||||
Object.prototype.toString.call(arr) === "[object Array]";
|
||||
var option,
|
||||
errOp,
|
||||
imageUrl = "";
|
||||
if (isArray) {
|
||||
for (var i = 0, len = arr.length; i < len; i++) {
|
||||
option = arr[i];
|
||||
if (!option.fop) {
|
||||
return false;
|
||||
}
|
||||
switch (option.fop) {
|
||||
case "watermark":
|
||||
imageUrl += this.watermark(option) + "|";
|
||||
break;
|
||||
case "imageView2":
|
||||
imageUrl += this.imageView2(option) + "|";
|
||||
break;
|
||||
case "imageMogr2":
|
||||
imageUrl += this.imageMogr2(option) + "|";
|
||||
break;
|
||||
default:
|
||||
errOp = true;
|
||||
break;
|
||||
}
|
||||
if (errOp) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (key) {
|
||||
imageUrl = this.getUrl(key) + "?" + imageUrl;
|
||||
var length = imageUrl.length;
|
||||
if (imageUrl.slice(length - 1) === "|") {
|
||||
imageUrl = imageUrl.slice(0, length - 1);
|
||||
}
|
||||
}
|
||||
return imageUrl;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
}
|
||||
|
||||
var Qiniu = new QiniuJsSDK();
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ class ImgPreviewCompoment extends Component {
|
|||
prevSrc={items[(photoIndex + items.length - 1) % items.length].src}
|
||||
onCloseRequest={() => this.handleClose()}
|
||||
imageLoadErrorMessage = "无法加载此图像"
|
||||
imageCrossOrigin = "use-credentials"
|
||||
imageCrossOrigin = "anonymous"
|
||||
imageTitle = {items[photoIndex].title}
|
||||
onMovePrevRequest={() =>
|
||||
this.setState({
|
||||
|
|
|
|||
Loading…
Reference in New Issue