[js]--input上传图片并浏览

学习目标

• 图片的上传并浏览
• 图片传入到后端，后端存储，并返回可以直接访问的图片链接

需要掌握的技能

• JavaScript
• nodejs

效果展示

生成步骤

前端

1. 上传图片后，图片浏览
   1. 用change事件监听，是否上传文件
   2. 获取上传的文件
   3. 给这个文件建立一个url
   4. 为预设好的图片设置的src属性

 //图片上传时图片浏览
            $('.file').change(function () {
                // 获取上传的文件
                var file = this.files[0]
                // 为上传的文件建立一个url
                var url = URL.createObjectURL(file)
                // 给图片设置src
                $('#iconImg').attr('src', url)
            })

1. 提价图片，并获得可以直接访问的图片地址
   1. 对提交按钮，监听click事件，点击之后就发送ajax请求给后端
   2. 注意的是发送的是FormData对象的数据

 // 上传到后端
            $('#submit').on('click', function (e) {
                // 阻止默认行为
                e.preventDefault();
                // 创建数组数据类型对象
                var icon = new FormData($('#form')[0]);
                // 给后端发送请求，存储图片并返回图片链接
                $.ajax({
                    type: 'post',
                    url: "http://127.0.0.1:4399/img",
                    data: icon,
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        console.log(result)
                    }
                })
            })

后端

把html页面和图片包都托管为静态资源

1. 接受图片，存储到uploads文件夹下
2. 获取文件名，拼接链接并返回

// 创建图片存放位置
var upload = multer({ dest: 'uploads/' })

// 托管静态资源
app.use(express.static('www'))
app.use(express.static('uploads'))
// 接受form类型的数据并存到本地的文件夹中
app.post('/img', upload.single('icon'), (req, res) => {
    let icon = '127.0.0.1:4399/' + req.file.filename
    // 返回连接
    res.send(icon)
})

con = '127.0.0.1:4399/' + req.file.filename
    // 返回连接
    res.send(icon)
})