preface

Words do not say, directly open lu 🦌!

Install the Node environment on Linux

  1. Go to the official website to download

    Use WinSCP to upload the file to the /root directory

  2. Run commands to decompress the installation
The tar XVF - node - v12.18.1 - Linux - x64. Tar. XzCopy the code

  1. Create a folder ~/app/nodejs and move it to that directory (easy to manage).
Node - v12.18.1 - Linux - x64 ~ mv/app/nodejsCopy the code
  1. Globally configured node
sudo ln -s~ / app/nodejs/node - v12.18.1 - Linux - x64 / binCopy the code
  1. Check whether the installation is successful
 node -v
Copy the code

Install Express test app.js

Express is a fast, open and minimalist Web development framework based on node. js platform

npm install express --save
Copy the code

var express = require('express');
var app = express();
app.get('/'.function (req, res) {
    res.send('Hello express! ');
});
var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;
});
Copy the code
Nodeapp.js // Start the serviceCopy the code

Map bed – supports multiple uploads

  1. npm install formidable
  2. npm install multer
  3. Create a new folder directory uploads
  4. Create index.html and paste the code directly here
<body>
    <div style="max-width:1200px; margin:0 auto; text-align: center; margin-top: 150px;">
        <input type="file" class="file" name="file" multiple="multiple" />
        <ul id='urlList'></ul>
    </div>
</body>
<script>
    document.querySelector('.file').addEventListener('change'.function (e) {
        let files = e.target.files
        if(! files.length)return// Upload the file to create FormDataletFormData = new formData () // Iterate through the FileList object to get multiple image objectsfor (leti = 0; i < files.length; I++) {// the append method in formData will append to an array if it already has the same key.'upFile', files[i], files[i].name)
        }
        console.log(formData.getAll('upFile'// I'm using axios.post()'url', formData)
        let xhr = new XMLHttpRequest()
        xhr.open('post'.'/upload'.true)
        xhr.send(formData);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                alert('success')
                console.log(xhr.responseText)
                let resObj = JSON.parse(xhr.responseText).message;
                lethostport = document.location.host; ForEach (item => {document.getelementById ('urlList').innerHTML += '<a href=http://' + hostport +
                        item + '>' + hostport + item + '</a><br>';
                })
            }
        }
    })
</script>
Copy the code
  1. Modify app.js, here directly paste the code
const express = require('express')
const fs = require("fs");
const app = express()
const path = require('path')
const multer = require('multer')
const multerObj = multer({
    dest: 'uploads/'}) // Upload middleware app.use(multerobj.any ()) // Allow direct access to static files app.use('/uploads', express.static('uploads'));

app.get('/', (req, res, next) => {
    res.setHeader('Content-Type'.'text/html')
    res.sendFile(path.join(__dirname, 'index.html'))
})

app.post('/upload', (req, res, next) => { console.log(req.files) file = req.files resArr = []; ForEach ((item) => {originalName = item.originalName; nameArray = name.split(' ');
        var nameMime = [];
        l = nameArray.pop();
        nameMime.unshift(l);
        while(nameArray.length ! = 0 && l ! ='. ') { l = nameArray.pop(); nameMime.unshift(l); } //Mime is the suffix of the file Mime = namemime.join (' '); Fs.rename (fs.rename(fs.rename) fs.rename(fs.rename) fs.rename(fs.rename) fs.rename(fs.rename) fs.rename(fs.rename) fs.rename(fs.rename)'./uploads/' + item.filename, './uploads/' + item.filename + Mime, (err) => {
            if (err) {
                console.log(err)
            }
        });
        resArr.push(`/uploads/${item.filename + Mime}`)}); res.send(200, {'code': 1,
        message: resArr
    })
})
app.listen(3000)
Copy the code
  1. View the process, kill the process, and restart it
netstat -ntlp
kill -9  NODE_PID
node app.js
Copy the code

If in aliyun cloud console directly

ctrl + c
node app.js
Copy the code
  1. Effect display: upload multiple images, return to map bed link, support preview, done! (Style optimization!)

conclusion

Alas! Finally, we have our own map bed service!

Github address open source is not easy, need your encouragement!

I have to say, Node is awesome, and a boon to all front-end developers who are struggling on the whole boardwalk! JavaScript is the world’s most……