由于我扒的图片接口开启了 跨域 怎么解决呢
chrome 浏览器 安装插件 CORS Unblock 需要手动开启哦。
当然你也可以直接用 公共图床 上传 然后手动复制链接了，不过有点麻烦。
// ==UserScript==
// @name 图床
// @namespace http://buyi.info/
// @version 2.6.1
// @description 添加图床上传接口
// @author 布衣
// @match https://*/admin/write-post.php*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 确保 DOM 元素已加载
window.addEventListener('load', function() {
const advancePanelBtn = document.getElementById('advance-panel-btn');
if (advancePanelBtn) {
// 创建一个新的 div 来包裹上传按钮
const buttonContainer = document.createElement('div');
buttonContainer.style.marginTop = '10px';
buttonContainer.style.display = 'flex';
buttonContainer.style.flexDirection = 'column';
buttonContainer.style.alignItems = 'flex-start';
// 创建"图床"的标签
const titleLabel = document.createElement('label');
titleLabel.innerText = '图床';
titleLabel.style.display = 'block';
titleLabel.style.marginBottom = '5px';
titleLabel.style.fontWeight = 'bold';
// 创建文件上传 input
const uploadInput = document.createElement('input');
uploadInput.type = 'file';
uploadInput.id = 'upload-button';
uploadInput.style.display = 'none';
// 创建文件选择标签
const label = document.createElement('label');
label.htmlFor = uploadInput.id;
label.innerText = '选择文件';
label.style.cursor = 'pointer';
label.style.backgroundColor = '#007bff';
label.style.color = '#fff';
label.style.padding = '5px 8px';
label.style.borderRadius = '4px';
label.style.textAlign = 'center';
label.style.display = 'inline-block';
label.classList.add('select-button'); // 添加 CSS 类
// 创建显示文件名的标签
const fileNameLabel = document.createElement('span');
fileNameLabel.style.marginTop = '5px';
fileNameLabel.style.fontWeight = 'bold';
fileNameLabel.innerText = ''; // 初始为空
// 创建上传按钮
const actualUploadButton = document.createElement('button');
actualUploadButton.type = 'button';
actualUploadButton.innerText = '上传';
actualUploadButton.style.padding = '5px 8px';
actualUploadButton.style.fontSize = '14px';
actualUploadButton.style.backgroundColor = '#28a745';
actualUploadButton.style.color = '#fff';
actualUploadButton.style.border = 'none';
actualUploadButton.style.borderRadius = '4px';
actualUploadButton.style.cursor = 'pointer';
actualUploadButton.classList.add('upload-button'); // 添加 CSS 类
// 创建进度条
const progressContainer = document.createElement('div');
progressContainer.style.width = '100%';
progressContainer.style.backgroundColor = '#f3f3f3';
progressContainer.style.borderRadius = '4px';
progressContainer.style.overflow = 'hidden';
progressContainer.style.marginTop = '5px';
progressContainer.style.display = 'none'; // 初始隐藏
const progressBar = document.createElement('div');
progressBar.style.height = '8px';
progressBar.style.backgroundColor = '#28a745';
progressBar.style.width = '0%'; // 初始宽度为0
progressBar.style.transition = 'width 0.3s ease'; // 过渡效果
// 创建百分比文本
const percentLabel = document.createElement('span');
percentLabel.style.marginTop = '5px';
percentLabel.style.fontWeight = 'bold';
percentLabel.innerText = '0%';
percentLabel.style.display = 'none'; // 初始隐藏
progressContainer.appendChild(progressBar);
progressContainer.appendChild(percentLabel); // 添加百分比文本
// 在 <head> 中插入 CSS 样式
const style = document.createElement('style');
style.textContent = `
.upload-button, .select-button {
transition: all 0.3s ease;
}
.upload-button:hover {
background: linear-gradient(45deg, #28a745, #45a049);
transform: scale(1.05);
}
.select-button:hover {
background: linear-gradient(45deg, #007bff, #0056b3);
transform: scale(1.05);
}
`;
document.head.appendChild(style);
// 获取现有的 textarea 元素
const responseTextArea = document.querySelector('textarea#text');
// 文件选择事件
uploadInput.addEventListener('change', function() {
const file = uploadInput.files[0];
if (file) {
fileNameLabel.innerText = `已选择文件: ${file.name}`; // 显示文件名称
} else {
fileNameLabel.innerText = ''; // 清空文件名称
}
});
// 上传按钮点击事件
actualUploadButton.onclick = function() {
const file = uploadInput.files[0];
if (file) {
const validImageTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif', 'image/webp'];
if (!validImageTypes.includes(file.type)) {
alert('请上传有效的图片文件。');
return;
}
const formData = new FormData();
formData.append('file', file);
formData.append('name', file.name);
formData.append('uuid', 'o_1iaqr3gie1s991p7usrhv011e3ea');
formData.append('path', 'tcl');
// 显示进度条和百分比文本
progressContainer.style.display = 'block'; // 显示进度条
percentLabel.style.display = 'inline'; // 显示百分比文本
// 使用 XMLHttpRequest 来支持进度监控
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://file.sang.pub/api/upload', true);
// 监听上传进度
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percentComplete = Math.round((event.loaded / event.total) * 100);
progressBar.style.width = percentComplete + '%'; // 更新进度条宽度
percentLabel.innerText = percentComplete + '%'; // 更新百分比文本
}
};
// 处理响应
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
const text = xhr.responseText;
console.log('原始响应:', text); // 打印原始响应
// 定义默认的 alt 文本
const altText = '图片';
// 生成 Markdown 格式的字符串
const markdownImage = ``;
if (responseTextArea) {
// 在光标处插入文本
const start = responseTextArea.selectionStart;
const end = responseTextArea.selectionEnd;
// 插入 Markdown 格式文本
responseTextArea.value =
responseTextArea.value.substring(0, start) +
markdownImage +
responseTextArea.value.substring(end);
// 设置光标位置到插入的文本后
responseTextArea.selectionStart = responseTextArea.selectionEnd = start + markdownImage.length;
responseTextArea.focus(); // 将焦点放回 textarea
} else {
console.error('找不到 textarea 元素');
}
// 上传完成后重置文件输入和名称
uploadInput.value = ''; // 清空文件输入
fileNameLabel.innerText = ''; // 清空文件名称
progressContainer.style.display = 'none'; // 隐藏进度条
percentLabel.style.display = 'none'; // 隐藏百分比文本
} else {
alert('上传失败，请重试。');
}
};
// 发送上传请求
xhr.send(formData);
} else {
alert('请先选择一个文件。');
}
};
// 创建一个新的 div 来包含选择文件和上传按钮
const actionContainer = document.createElement('div');
actionContainer.style.display = 'flex';
actionContainer.style.gap = '5px';
actionContainer.appendChild(label);
actionContainer.appendChild(uploadInput);
actionContainer.appendChild(actualUploadButton);
// 将标题标签、操作容器和进度条添加到 buttonContainer 中
buttonContainer.appendChild(titleLabel);
buttonContainer.appendChild(actionContainer);
buttonContainer.appendChild(fileNameLabel); // 添加文件名显示标签
buttonContainer.appendChild(progressContainer); // 添加进度条容器
// 将按钮容器添加到 advance-panel-btn 之后
advancePanelBtn.parentNode.insertBefore(buttonContainer, advancePanelBtn.nextSibling);
}
});
})();
最后更新 2024-10-26