图片上传预览接收

HTML

<div class="image_box">
         <label class="upload_icon">+</label>
         <input type="file"  accept="image/*" @change="uploadImage(this)" id="file" name="file"  class="upload_img"/>
</div>
<div class="preview">
          <img :src="imagesrc" class="image_pic"/> 
</div>

uploadImage(data) {
            var URL = window.URL || window.webkitURL || window.mozURL;
            var reads = new FileReader();
            var f = document.getElementById('file').files[0];
            reads.readAsDataURL(f); // 读取blob或file对象
            const formData = new FormData();
            formData.append('myFile', f);
            console.log(formData, 80801, f)
            fetch('/ttt/api/upload', {
                method: 'POST',
                body: formData
            }).then(res => {
                return res.ok ? res.json() : res.status
            }).catch(error => console.log('error', error))
            .then(response => {
                console.log(response)
            });
            // onload 事件会在页面或图像加载完成后立即发生
            reads.onload = (e) => {
                // 本地预览图片
                // this.imagesrc = e.target.result; // 用base64展示图片
                this.imagesrc = URL.createObjectURL(f);
            }
        },

原生node

const http = require('http');
const fs = require('fs');

var proxy = http.createServer(function (request, response) {
    var uploadPath = '/ttt/api/upload';
    //新建一个空数组接受流的信息
    var chunks = [];
    //获取流长度
    let num = 0;
    if(request.url === uploadPath) {
        request.on('data', function(uploadcont) {
            chunks.push(uploadcont);
            num+=uploadcont.length;
        })
        request.on('end', function() {
            var bufferconcat=Buffer.concat(chunks,num);
            //新建数组接收出去
的数据下标
            var newArray=[];
            for(var a = 0; a < bufferconcat.length; a++){
                // 10代表
 13代表
 根据
分离数据和报头
                if(bufferconcat[a].toString() == 13 && bufferconcat[a + 1].toString() == 10){
                    newArray.push(a);
                }
            }
            console.log(222,bufferconcat)
            // 获取上传图片信息
            var name = bufferconcat.slice(newArray[0],newArray[1]).toString().split(";")[2].split("=")[1];
            var filename = name.split(""");
            //图片数据
            console.log(newArray,1112)
            var nbuf = bufferconcat.slice(newArray[3] + 2, newArray[newArray.length - 2]);
            let address="./upload/" + filename[1];
            console.log(nbuf)
            //创建空文件并写入内容
            fs.writeFile(address, nbuf, function(err){
                if (err) {
                    console.log(err);
                }else{
                    console.log("创建成功");
                }
            });
        });
    } 
}).listen(8088);

express 框架 + connect-multiparty 插件

const http = require('http');
const fs = require('fs');
var express = require('express');
var app = express();
var multipart = require('connect-multiparty'); //在处理模块中引入第三方解析模块
var multipartMiddleware = multipart();
const path = require('path');

app.post('/ttt/api/upload', multipartMiddleware, function (req, res) {
    console.log(req.files.myFile, 8088811)
    // 临时文件的位置
    let path = req.files.myFile.path;
     // 文件将被移到的指定位置
    let output = './upload/' + req.files.myFile.originalFilename;
    var source = fs.createReadStream(path);
    var dest = fs.createWriteStream(output);
    source.pipe(dest);
    res.send({
        success: true
    });
});

// 读取图片
app.get('/apimg/upload/list',function(req1,res1) {
    let url = 'http://127.0.0.1:8088/1.png'
    res1.send({
        success: true,
        url: url
    })
})；

app.use(express.static(path.join(__dirname, 'upload')));

var server = app.listen(8088, function () {
    var host = server.address().address
    var port = server.address().port
    console.log("应用实例，访问地址为 http://%s:%s", host, port)
});

图片上传预览 接收

图片上传预览接收