前端html，js实现图片的上传与下载

html 上传

  <form>
        <input type="file">
    </form>
    <button>上传图片</button>

js

let but = document.querySelector('button');
        let form = document.querySelector('form');

        but.addEventListener('click', () => {
            let Formdata = new FormData(form); //前端所需的函数   
            Formdata.append('file', form.children[0].files[0]);//获取form下的子元素
            let xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://loalhost:8000/loadUp');
            xhr.send(Formdata);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        console.log(xhr.response);
                    }

                }
            }
        })

js 服务器的建立

说明一下，这里需要node 来加载express ，还需要下载mutiparty 模块

/**
  上传
*/
const express = require('express');

const app = express();
//后端上传需要的
const multiparty = require('multiparty');

app.post('/loadUp', (request, response) => { //上传图片
    let form = new multiparty.Form({
        uploadDir: '你想要上传并存放的位置'     //文件转存
    });

    form.parse(request, (err, fields, files) => {//fields: 上传普通的数据 ；file: 上传文件
        console.log(fields, 'fields');
        console.log(files, 'files');
    })
    response.setHeader('Access-Control-Allow-Origin', '*');//允许请求所有跨域 
    response.send("200");
})
app.listen(8000, () => {
    console.log("8000端口启动");
})

html 下载

<img src="http://loalhost:8000/getImg" alt="">

js

//后端下载需要模块
const fs = require('fs');

app.get('/getImg', (request, response) => { //图片的下载
    response.setHeader("Access-Control-Allow-Origin", "*");// 允许请求所有跨域 *
    fs.readFile('下载图片的位置', (err, data) => {
        console.log(data);
        response.send(data);
    })
app.listen(8000, () => {
    console.log("8000端口启动");
})
})