vue项目里面图片上传功能

最新推荐文章于 2024-05-24 10:55:30 发布

倚楼听风雨的行者

最新推荐文章于 2024-05-24 10:55:30 发布

阅读量919

点赞数 1

本文链接：https://blog.csdn.net/qq_42972187/article/details/91827831

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .uploadimg{
        width:100px;
        height:100px;
        border-radius: 50%;
    }
</style>

<body>
<div id="app">
    <input type="file" @change="upTx" id="txUrl">
    <img class="uploadimg" :src="imgsrc"/>
    </div>
</div>

</body>
<!--<script src="util.js">-->
<!--</script>-->
<script src="../vue.js">
</script>
<script src="../jquery-1.11.1.js"></script>
<script src="../axios.js"></script>
<script>
    var vm  = new Vue({
        el:"#app",
        data:{
            imgsrc:"000",
            return:{
            }
        },
        mounted(){
        },
        methods:{
            upTx() {
                var _this = this;
                var r = new FileReader();
                var file = document.getElementById("txUrl").files[0];
                var beat64Url;
                if (!/image\/\w+/.test(file.type)) {
                    // this.$message.error("上传的文件必须为图片！！");
                    alert('上传的文件必须为图片');
                    return false;
                }
                r.readAsDataURL(file);
                r.onload = function(e) {
                    beat64Url = this.result;
                                   };
                var formData = new FormData();
                formData.append("upload_img", $("#txUrl")[0].files[0]);
                axios({
                    url: "https://mk_api.dthudong.cn/api/file/upImg",
                    method: "POST",
                    headers: {
                        token: '55a31e89d7dd8b80282cba7d844d1c28'
                    },
                    data: formData
                })
                    .then(res => {
                        console.log(res.data);
                        if (res.data.code == 0) {
                            vm.imgsrc =res.data.data.src;
                         console.log(vm.imgsrc)
                        } else {
                            _this.$message({
                                message: res.data.msg,
                                type: "alert"
                            });
                        }
                    })
                    .catch(function(error) {
                    });
            },
        }
    })

</script>
</html>

倚楼听风雨的行者

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue项目里面图片上传功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .uploadimg{ width:100px; ...
复制链接

扫一扫