您现在所在位置: 首页 > 新闻中心

挑选婚纱照相框必须了解的小知识

2021-03-31 22:27:58
浏览: 113次 来源:【jake】 作者:-=Jake=-
返回列表

将图像文件上传到服务器

前言:

在Web应用程序中如何上传图片到服务器鸭脖app官网秒速时时彩亚博app安全有保障亚博体彩 ,上传图片的功能非常普遍。今天,我将与您分享将图片上传到服务器的两种方法如何上传图片到服务器亚博直播 ,包括前端和后端代码(在后台使用Node)。

本文使用的环境是:

一、使用表格

1.前端代码

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>文件上传表单title>
head>
<body>
<h3>文件上传:h3>
选择一个文件上传: <br />
<form action="/file_upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image" size="50" />
    <br />
    <button type="submit">上传button>
form>
body>
html>

注意:

2.后端代码

var express = require('express');
var app = express();
var fs = require("fs");
var multer  = require('multer');
app.use('/public',express.static('public'));
app.use(multer({ dest: '/tmp/'}).array('image'));
app.post('/file_upload',function (req, res) {
    fs.readFile( req.files[0].path, function (err, data) {
        var des_file = __dirname + "/public/img/" + req.files[0].originalname;
        fs.writeFile(des_file, data, function (err) {
            if(err){
                console.log( err );
            }else{
               var response = {
                    message:'文件上传成功',
                    filename:req.files[0].originalname
                };
            }
            res.send( JSON.stringify( response ) );
        });
    });
})
var server = app.listen(8081, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log("应用实例,访问地址为 http://", host, port)
})

注意:

二、使用输入侦听更改事件

1.前端代码

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>文件上传表单title>
head>
<body>
<h3>文件上传:h3>
选择一个文件上传: <br />
<input id="file" type="file" name="image" size="50" />

body>
<script src="jquery.min.js">script>
<script>
    $('#file').change(function(){
        var input = $('#file')[0];
        //图片上传成功后会将图片名称赋值给 value 属性
        if(input.value){
            //使用 FormData 对象
            var formData = new FormData();
            //将图片对象添加到 files
            formData.append('files', $('#file')[0].files[0])
            //使用 ajax 上传图片
            $.ajax({
                url: 'http://localhost:8081/file_upload',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function(res) {
                console.log(res);
            }).fail(function(res) {
                console.log(res);
            });
            //以下是将图片显示到 img 标签上
//            var pic = input.files[0];
//            var read = new FileReader();
//            read.onload = function (e) {
//               document.getElementById('img').src = e.target.result;
//            };
//            read.readAsDataURL(pic);
        }
    })
script>
html>

注意:

2.后端代码

var express = require('express');
var app = express();
var fs = require("fs");
var path = require('path');
var uuid = require('uuid');
var formidable = require('formidable');
app.use('/public',express.static('public'));
app.post('/file_upload',function (req, res) {
    //创建表单
    var form = new formidable.IncomingForm();
    //设置编码格式
    form.encoding = 'utf-8';
    //设置文件存储路径
    form.uploadDir = "public/img";
    //保留后缀
    form.keepExtensions = true;
    //设置单文件大小限制 2m
    form.maxFieldsSize = 2 * 1024 * 1024;
    //form.maxFields = 1000;  设置所以文件的大小总和
    form.parse(req, function (err, fields, files) {
        var file = files.files;
        let picName = uuid.v1() + path.extname(file.name);
        fs.rename(file.path, 'public\\img\\' + picName, function (err) {
            if (err) return res.send({ "error": 403, "message": "图片保存异常!" });
            res.send({ "picAddr": picName });
        });
    });
})
var server = app.listen(8081, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log("应用实例,访问地址为 http://", host, port)
})

注意:

老王


搜索