Vue上传图片并实时回显

有注释，等有时间在详细写这篇文章
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>添加图片</title>
    <style>

        #upload-tip {
            border: 1px dashed #d9d9d9;
            width: 135px;
            height: 135px;
            line-height: 135px;
            cursor: pointer;
            font-size: 36px;
            color: #d9d9d9;
        }

        #img-show {
            width: 135px;
            height: 135px;
            display: block;
            margin: 0 auto;
            object-fit: cover;
        }
    </style>
    <script>
        function imgfileChange() {
            var upload_tip = document.getElementById("upload-tip");
            var img_show = document.getElementById("img-show");
            var imgfile = document.getElementById("imgfile");
            var freader = new FileReader();
            //开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
            freader.readAsDataURL(imgfile.files[0]);
            /*       console.log(imgfile.files[0])*/
            //处理load事件。该事件在读取操作完成时触发。
            freader.onload = function (e) {
                //  e.target.result;  就是data:image/jpeg;base64,+编码  就相当于直接解码
                img_show.src = e.target.result;
                /*console.log(e.target.result)*/
                img_show.style.display = "inline";
                upload_tip.style.display = "none";
            };

        }
    </script>
</head>
<body>
<div id="app">
    <div id="wrap">
        <div id="content">

            <form style="width: 135px;height: 135px;padding-left: 50%;padding-top: 20%">

                <label>
                    <div style="text-align: center">
                        <div id="upload-tip">+</div>
                        <img src="" alt="" id="img-show" style="display: none">
                        <input type="file" id="imgfile" ref="myFile" style="display: none" onchange="imgfileChange()">
                    </div>
                </label>
                <button type="button" @click="savePlaceInfo">提 交</button>&emsp;
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script>

    const app = new Vue({
        el: "#app",
        data: {
            provinces: [],
            place: {},
            id: "",
        },
        methods: {
            savePlaceInfo() {//保存图片的方法
                console.log(this.place);
                //查找到存放文件的元素。
                //输出 <input type="file" id="imgfile" onchange="imgfileChange()" style="display: none;">
                let myFile = this.$refs.myFile;
                //type 为 file 的 input 元素内部有一个 files数组，里边存放了所有选择的 file，由于文件上传时，文件可以多选，因此这里拿到的 files 对象是一个数组。
                let files = myFile.files;
                console.log(files)
                //拿到编码之后的图片数据
                //从 files对象中，获取自己要上传的文件，由于这里是单选，所以其实就是数组中的第一项。
                let file = files[0];
                console.log(file)
                /* console.log(file)*/
                let formData = new FormData();
                formData.append("pic", file);
                //axios
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/save',
                    data: formData,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then((res) => {
                    /*  console.log(res.data);*/
                });
            },

        }
    })

</script>


/**
 * @description：TODO
 * @Author MRyan
 * @Date 2020/4/17 12:05
 * @Version 1.0
 */
@RestController
@CrossOrigin
public class UploadController {

    @PostMapping("save")
    public String toupload(MultipartFile pic) throws IOException {//pic为vue传递的字段
        System.out.println(pic);
        String s = Base64Utils.encodeToString(pic.getBytes());
        //直接将s存储到数据库中就可以了 数据库字段 mediumtext   排序规则utf8_general_ci
        //展示图片base64解码的时候:src data:image/png;base64,后面加上s
        return s;
    }

}
Vue上传图片并实时回显

猜你喜欢
