图片上传修改自定义样式

最新推荐文章于 2024-03-14 21:44:33 发布

偷走你的笑

最新推荐文章于 2024-03-14 21:44:33 发布

阅读量842

点赞数

分类专栏：深蓝的大学

本文链接：https://blog.csdn.net/weixin_42680298/article/details/89248249

版权

深蓝的大学专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <title>Vue</title>
</head>

<body>
    <div id="app">
        <div @click="click" class="center">
            <img src="src/assets/img/team.png" alt="">
        </div>
        <span>{{fileName}}</span>
        <input type="file" ref="uploadFile" style="display:none" accept="image/*" @change="upload"/>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                fileName: ''
            },
            methods: {
                click () {
                    // 触发文件上传
                    this.$refs.uploadFile.click();
                    document.getElementById('uploadFile').click()
                },
                upload (event) {
                    let files = event.target.files || event.dataTransfer.files;

                    if (!files.length) {
                        this.fileName = '';
                        return;
                    }
                    this.fileName = files[0].name;

                    // 上传之后调用接口...
                    let params = new FormData();
                    params.append('file', files[0]);
                    console.log(params);

                    this.$refs.uploadFile.value = null; // 移除文件，可以保证上传同样的文件时，也会触发change事件
                }
            }
        })
    </script>
</body>

<style>
.center{
    position: absolute;
    top: 50%;
    left: 50%;

}
</style>
</html>

根据自己的需要修改，可以加一个遮罩层，在调用接口后修改透明度，图片上传后从接口处获得返回的图片url，之后可以用双向绑定修改显示的图片，这样又可以实现预览的功能。

偷走你的笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传修改自定义样式

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://unpkg.com/vue"></script> <tit...
复制链接

扫一扫