【JS实战】隐藏input -file，点击图片触发文件上传，并存到数据库中

在写个人博客过程中，遇到一个问题，点击图片更换图片，并将图片文件上传到数据库

这个也可以应用到上传头像，改变头像

下面来看一下实现过程：

html部分

        <img src="${data.imgUrl}" id ="imgs"/>
        <input hidden
        type="file" id="files1" multiple onchange ="imgChange()" size="mini">
    

css部分就是将两个标签的宽高一一样就行，并且位置重叠

js部分

主要用到了promise，其中发送请求用到了fetch

// 图片处理
        async function imgUpload() {
            let data = $("#files1").get(0).files[0];
            let formData = new FormData();
            formData.append("blogimg", data); //属性img：data？
            const url = `http://localhost:${port}/api/upload/blogImg`;
            const config = {
                method: 'POST',
                body: formData
            }
            const req = new Request(url, config);
            //响应对象是一个pormise
            const res = await fetch(req);
            //得到响应内容
            const pro = await res.json();
            return pro;

        }
        //点击图片修改
        async function imgUpdate() {
            //图片处理
            let img = await imgUpload();
            img = img.data;

            var file = $('#files1');
            var imgs = $('#imgs');
            var imgsurl = URL.createObjectURL(file.files[0]); //图片转换
            imgs[0].src = imgsurl //展示图片

        }
        //通过点击图片来触发文件上传按钮
        $("#imgs").click(() => {

            $("#files1").click();
        });

最后展示结果