ミニマルなWebマップのベッド用途、コピーをサポートして貼り付け、ドラッグ＆ドロップのアップロード写真
その理由を開発1
値下げノートとブログ記事を書くときに、画像を挿入する毎日の使用対コードの記事で見られる非常に不便です
- 相対パスにより調製地元紙を使用してください---直接ではなく、他の場所にコピー＆ペースト
- ベッドのサードパーティ製のビューの使用---ログインアカウントに必要（または保証にあなたの「ポケット」に入れて）
- コード---多くの組み込みイン不便バグ対
- 投げのような（真）
2.エフェクトプレビュー
、すべての添えものを捨てる毎日の使用を満たすために
スタティックマップ
アクションフィギュア
経験aにクリックしてください
プロジェクト住所：GitHubに、詳細な食品ガイドを伴って、0-1から
3.手のコードのコア部を説明します
コピーを取得し、画像を貼り付ける方法（1）？
まずTEXTAREA取得コンテンツペースト/ドラッグ、コピー/ドラッグ写真を見せIMGを作成します
<!-- 用于粘贴或拖拽图片 -->
<textarea id="paste-panel"></textarea>
<!-- 用于展示粘贴/拖拽的图片 -->
<img id="img-panel" src="">作成したら、の効果を見ることができます
次は書き込みjsのコードにあります
// 获取到对应的dom
let $textarea = document.getElementById('paste-panel');
let $img = document.getElementById('img-panel');
/**
* 绑定粘贴事件
**/
$textarea.addEventListener('paste', function(e) {
// 组织触发默认的粘贴事件
e.preventDefault();
// 获取粘贴板中的内容
let {
items
} = e.clipboardData;
// 遍历获取到的items
for (const item of items) {
// 如果是文件对象且类型为图片
if (item.kind === 'file' && item.type.includes('image')) {
// 获取到文件对象
let imgFile = item.getAsFile()
// 将文件转成url
let src = URL.createObjectURL(imgFile)
// 展示生成的url
$img.src = src;
return;
}
}
})効果
（2）どのように画像をドラッグして取得するには？
ちょうどに基づいてHTML構造、私たちは書き込みjsのコードに協力しましょう
// 禁用默认的拖拽触发的内容(防止浏览器直接打开图片文件)
document.addEventListener('drop', function(e) {
e.preventDefault()
})
document.addEventListener('dragover', function(e) {
e.preventDefault()
})
/**
* 监听文件拖拽相关事件
**/
// 判断文件是否是拖拽进入了指定区域再释放
let drag = false;
// 拖拽进入
$textarea.addEventListener('dragenter', function(e) {
drag = true;
})
// 拖拽在区域里移动
$textarea.addEventListener('dragover', function(e) {
drag = true;
});
// 离开指定的区域
$textarea.addEventListener('dragleave', function(e) {
drag = false;
})
// 在指定的区域释放
$textarea.addEventListener('drop', function(e) {
if (drag) {
// 获取拖拽的文件
let {
files
} = e.dataTransfer;
for (const file of files) {
// 如果为图片文件则展示
if (file.type.includes("image")) {
// 将文件转成url
let src = URL.createObjectURL(file)
// 展示生成的url
$img.src = src;
return;
}
}
}
})効果
この上の2つの重要な問題が解決します
（3）はどのように7つの牛クラウドにアップロードする方法は？
メソッドのJSの書き込み（構築物を用いてWebPACKのプロジェクトを、ので、ここを介してダウンロードされたNPM qiniu-JS-SDKのリソースCDN組み込まページのスクリプトタグで直接使用することができるqiniu-JS-SDK-依存）
import * as qiniu from "qiniu-js";
let Domain = 'bind-host' // 七牛云对象存储空间绑定的域名
let observer = {
next(res) {
console.log(res);
//上传进度
let { percent } = res.total;
},
error(err) {
console.log(err);
},
complete(res) {
let { key } = res;
// 完整的图片链接
let completeUrl = `${Domain}/${key}`;
}
}
/**
* 文件上传
* @param {Blob|File} file
* @param {String} filename
**/
function uploadFile(file, filename) {
// 上传配置
let putExtra = {
fname: filename,// 文件名称
params: {},
mimeType: null // 文件类型(null:系统自动识别)
};
// 上传用户平凭据
let token = 'xxxxx....';
// config
let config = {
useCdnDomain: true,// 是否使用cdn加速
region: qiniu.region.z0
//选择上传域名区域；当为 null 或 undefined 时，
//自动分析上传域名区域,我是选择的华东所以是z0
}
}
// token 上传身份验证秘钥
let observable = qiniu.upload(file, filename, token, putExtra, config)
// 配置回调函数
observable.subscribe(observer)
}
トークン認証情報をアップロードするユーザーを生成する方法（4）？
ここでのNode.jsを使用して生成します
JSを書きます
const qiniu = require('qiniu')
const fs = require('fs');
// 七牛账号下的一对有效的Access Key和Secret Key
// 对象存储空间名称 bucket
let accessKey = 'xxxx',
secretKey = 'xxx',
bucket = 'xxxx';
//鉴权对象
let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
let options = {
scope: bucket,
expires: 60 * 60 * 24 * 7 //这里设置的7天,token过期时间(s(秒))
};
let putPolicy = new qiniu.rs.PutPolicy(options);
let uploadToken = putPolicy.uploadToken(mac);
// 将获取的token生成写入到token.txt中
fs.writeFileSync("./token.txt", uploadToken);絵の解釈
1.オブジェクト・ストレージ・バケットの名前
2.Access鍵と秘密鍵
書き込み動作のtoken.jsの完了後
node token.js同じディレクトリ内のファイル、所望のユーザの資格情報となっているコンテンツを生成Token.txt
要約で
これは、7頭の牛は、上記の知見を利用してクラウド、単純なWebベースのマップのベッドを構築することができます
4.最後に、プロジェクトのgithubのアドレスへの参照やリンクを添付
参考資料
プロジェクトアドレス
私のGitHub
プロジェクト住所：https://github.com/ATQQ/image-bed-qiniu
経験住所：https://picker.sugarat.top/