实现图片上传并实时预览

时间 2020-04-27

标签实现图片上传实时预览繁體版

原文原文链接

tttiger

知识储备

`input type="file"`的`accept`属性

accept 属性只能与 <input type="file"> 配合使用。它规定可以经过文件上传进行提交的文件类型。html

提示：请避免使用该属性。应该在服务器端验证文件上传。前端

<form>
  <input type="file" name="pic" id="image" accept="image/gif, image/jpeg" />
</form>

若是不限制图像的格式，能够写为：accept="image/*"。ios

`multiple`

multiple 属性规定输入字段可选择多个值。
若是使用该属性，则字段可接受多个值。
默认不使用若要用直接在input里加上multiple便可ajax

注释：multiple 属性使用欧冠与如下 <input> 类型：email 和 file。express

<form >
  Select images: <input type="file" name="img" multiple />
  <input type="submit" />
</form>

实例

后端逻辑

//引入express
const express = require('express');
const fs = require('fs');
const multer = require('multer');
//指定上传存放的位置
const upload = multer({
    dest: 'uploads/'
})

// 建立项目实例
const app = express();

// 静态文件托管
app.use('/uploads', express.static(__dirname + '/uploads'))

//原生ajax路由
app.get('/form/ajax', async (req, res) => {
    const form = await fs.readFileSync('./ajax_form.html', {
        encoding: 'utf8'
    });
    res.send(form)
})
app.post('/upload/ajax', upload.single('file'), async (req, res) => {
    const file = req.file
    file.url = "http://localhost:3000/uploads/" + file.filename;

    res.send(file);
})


//axios路由
app.get('/form/axios', async (req, res) => {
    const form = await fs.readFileSync('./axios_form.html', {
        encoding: 'utf8'
    });
    res.send(form)
})

app.post('/upload/axios', upload.single('image'), async (req, res) => {
    //这里的image 是指表单里面 name = image 的那个表单数据
    // 这个req.file 是multer添加到请求里面的一个属性 单文件是file 多文件 是files 若是有文本数据是req.body
    const file = req.file
    file.url = "http://localhost:3000/uploads/" + file.filename;
    res.send(file);
})

// 监听端口
app.listen(3000, () => {
    console.log('服务器启动成功，主页地址http://localhost:3000')
})

前端代码

ajax原生提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <img id="img1">
    </div>

        <form id="form">
        <input id="btn" type="file" value="上传文件" name="file"> <br>
    </form>
    <!-- 引入axios库 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        const btn = document.getElementById('btn')
        btn.onchange = async () => {
            const form = document.getElementById('form');
            //建立FormData对象
            const formData = new FormData(form)
            // 建立ajax 对象
            const xhr = new XMLHttpRequest();
            // 请求方式  请求地址
            xhr.open('post','http://localhost:3000/upload/ajax');
            xhr.send(formData)
            xhr.onload = function() {
                // 把返回的字符串转成json对象
                const res = JSON.parse(xhr.responseText)
                const img = document.getElementById('img1');
                // 注意axios才是res.data  具体仍是看返回的数据格式
                img.src=res.url;
            }
        }    
    </script>
    <style>
        img {
            width: 100px;
        }
    </style>
</body>
</html>

axios提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <img id="img1">
    </div>

        <form id="form">
        <input id="btn" type="file" value="上传文件" name="file"> <br>
    </form>
    <!-- 引入axios库 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        const btn = document.getElementById('btn')
        btn.onchange = async () => {
            const form = document.getElementById('form');
            //建立FormData对象
            const formData = new FormData(form)
            const res = await axios.post('http://localhost:3000/upload/axios',formData)
            if(res) {
                // console.log(res.data.url)
                const img = document.getElementById('img1');
                img.src=res.data.url;
            }
        }    
    </script>
    <style>
        img {
            width: 100px;
        }
    </style>
</body>
</html>