Use the free seven Ox Cloud OSS(10G) to build a personal in-line chart bed

This is the fourth day of my participation in Gwen Challenge

The code has been given to everyone in advance of the code (the original three big pieces, no framework code), everyone only need to register a seven niuyun account, change 4 lines of code

The end result is this, very simple.

Support copy and paste, screenshots, manual selection, drag and drop and other four common upload solutions

The online preview

  • The online demo
  • Online code

Need to prepare

Remember to choose to create public storage space

  • Seven cattle cloud account one
  • Qiniu Cloud object storage space (free 10G)
  • Installation Node. Js

Quick learning

1. The clone warehouse

git clone https://github.com/ATQQ/image-bed-qiniu.git
Copy the code

2. Install dependencies

yarn install
Copy the code

3. Modify environment variables

Env. Local or directly modify the. Env file and add the following content

These four items need to be configured by yourself

QINIU_ACCESS_KEY=AccessKey 
QINIU_SECRET_KEY=SecretKey
QINIU_BUCKET=Bucket # OSS space name
QINIU_DOMAIN=domain # map bed domain (including protocol HTTPS/HTTP)
Copy the code

The following screenshots show where several variables are fetched

Look at the bucket

View Access keys and Secret keys

To view the domain name

4. Start

Development Environment Preview

yarn dev
Copy the code

The production building

yarn build
Copy the code

The build results can be deployed directly

Digg friends without cloud services can use free Tencent cloud Serverless deployment

View the Serverless Deployment static resource site’s manual tutorial

Key implementation section is introduced

The above operations are carried in the Textarea field

const pastePanel = document.getElementById('pastePanel');
Copy the code

Read the contents of the clipboard

  • Listening to the target DompasteThe event
  • In the callback functionevent.clipboardData.itemsGets the contents of the clipboard
  • Among themitemsEach of the elements ofitemThere arekindandtypeTwo attributes
  • throughkindProperty filters the type of content in the clipboard, passingtypeDetermine the valueThe MIME typeIs it a picture?
  • Call after judging the result is the picture file we needitem.getAsFileMethod to convert content toFileobject
  • Call the upload method
/** * listen for the paste event */
pastePanel.addEventListener('paste'.function (e) {
    console.log('paste');
    // Prevents the default paste event from being triggered
    e.preventDefault();

    let { items } = e.clipboardData;
    for (const item of items) {
        if (item.kind === "file" && item.type.startsWith("image")) {
            // Upload the file object
            let file = item.getAsFile();
            // File name (with a prefix equivalent to directory)
            let fileName = 'mdImg/' + btoa(Date.now()) + Date.now().toString().substring(1);
            // Start uploading
            uploadFile(file, fileName);
        } else if (item.type === 'text/plain') {
            item.getAsString(str= >{ e.target.value += str; }); }}})Copy the code

Gets the dragged file

  • First, disable the documentdropThe event
  • Listening to the target DomdropThe event
  • In the callback functionevent.dataTransfer.filesGets the content released by drag and drop
  • throughfile.typeJudgmental documentThe MIME typeIs it a picture?
  • Call upload method
// Disable the default drag-and-drop trigger
document.addEventListener('drop'.function (e) {
    e.preventDefault()
}, true)
document.addEventListener('dragover'.function (e) {
    e.preventDefault()
}, true)

pastePanel.addEventListener('drop'.function (e) {
    let { files } = e.dataTransfer;
    for (const file of files) {
        if (file.type.startsWith("image")) {
            // File name (with a prefix equivalent to directory)
            let fileName = 'mdImg/' + btoa(Date.now()) + Date.now().toString().substring(1);
            // Start uploadinguploadFile(file, fileName); }}})Copy the code

Writes content to the clipboard

This is the easiest way to write it, regardless of compatibility

/** * To write the result to the clipboard *@param {String} text 
 */
function copyRes(text) {
    const input = document.createElement('input');
    document.body.appendChild(input);
    input.setAttribute('value', text);
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
    }
    document.body.removeChild(input);
}
Copy the code