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

曾经终败给现在 2023-09-27 19:31 8阅读 0赞

> html 上传

> js

> 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 下载

> 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端口启动");
    })
    })