vue下实现图片Base64上传

最新推荐文章于 2024-12-20 11:18:26 发布
神经冰
最新推荐文章于 2024-12-20 11:18:26 发布
阅读量412
点赞数
分类专栏： html5 与CSS3
本文链接：https://blog.youkuaiyun.com/u014069424/article/details/106116651
版权
html5 与CSS3 专栏收录该内容
4 篇文章
订阅专栏
本文档解析了一个用于企业内部需求反馈的HTML页面代码，详细介绍了页面布局、样式和交互功能，包括表单输入、文件上传、图片预览及提交功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">


    <title>企业需求</title>
    <script src="vue.js"></script>
    <script src="axios.min.js"></script>
</head>
<style>
    .checkTeam{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 44px;
        width: 100%;
        border-bottom: 1px solid #E1E5E7;
        background-color: #FFFFFF;
    }
    .checkTeamTxt{
        padding-left: 10px;
        width: 40px;
    }
    .checkTeamInput{
        height: 34px;
        width: 80%;
        flex: 1;
        border-radius: 4px;
        border:0px solid #FFFFFF ;
        font-size: 13px;
        margin-left: 10px;
    }

    .listItem_right_bottom{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .qaContent{
        font-family: 'PingFangSC','helvetica neue','hiragino sans gb','arial','microsoft yahei ui','microsoft yahei','simsun','sans-serif'!important;
        color: #A2A2A2;
        font-size:small
    }
    .okbuok{
        background-color: #FFFFFF;
    }

    .image2{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        background:url(vue/header02.jpg) no-repeat ;
        background-size: 100% 100%;
        height:80px ;
    }
    .upload_contain{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        height: 100px;
        margin-top: 3px;
        background-color: #FFFFFF;
    }
    .upload{
        width: 90px;
        height: 90px;
    }
    .qing{
        height: 40px;
        background-color: #FFFFFF;
        width: 100%;
        text-align: center;
        line-height: 40px;
    }
    .tijiao_contain{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 90px;
    }

    .tijiao{
        width: 90%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #00B0E5;
        color: #FFFFFF;
    }


</style>

<body style="overflow: scroll;background-color: #f9f9f9">

<div id="app">
    <div class="checkTeam">
        <div class="checkTeamTxt">姓名</div>
        <input  id="realName"   class="checkTeamInput"  name="realName"  type="text" value="" placeholder="请填写姓名" maxlength="8"/>
    </div>

    <div class="checkTeam">
        <div class="checkTeamTxt">电话</div>
        <input id="mobilePhone"    class="checkTeamInput"    name="mobilePhone" type="text" value="" placeholder="11位手机号" maxlength="11"/>
    </div>

    <textarea rows="10" cols="30" style="width: 100%;color: #8c8c8c">详细描述您要提交的问题</textarea>

    <div class="okbuok">
        <div>
            是否允许公开: 公开  <input type="radio" id="dewey" name="drone" value="dewey">  不公开 <input type="radio" id="louie" name="drone" value="louie">
        </div>
        <div>
            是否允许部门联系: 允许  <input type="radio" id="ok" name="123" value="dewey">  不允许<input type="radio" id="nook" name="123" value="louie">
        </div>
    </div>

    <div class="upload_contain">
        <input type="file" id="file_one"    @change="inputChange($event)" style="display: none">
        <input type="file" id="file_two"    @change="inputChange($event)"  style="display: none">
        <input type="file" id="file_three"  @change="inputChange($event)"  style="display: none">

        <img   id="img_one"    @click="imgOne" class="upload" src="vue/upload.jpg" >
        <img   id="img_two"    @click="imgTwo" class="upload" src="vue/upload.jpg" />
        <img   id="img_three"  @click="imgThree"  class="upload"  src="vue/upload.jpg" />
    </div>

    <div class="qing" style="font-size: x-small">请提供现场图片和位置信息，更快更准处理诉求</div>

    <div class="tijiao_contain">
        <div class="tijiao">提交</div>
    </div>
    <!--<div class="qing" style="background-color: #f9f9f9">点击查看<span style="color: #00B0E5">《随手拍处理流程》</span></div>-->


</div>

<script>

    var   input_one ;
    var   input_two;
    var   input_three;
    new Vue({
        el: '#app',
        data: {
            img01_src:"",
            img02_src:"",
            img03_src:"",
        },
        mounted: function () {
        },

        methods: {

            inputChange(e){ //点击弹出模态框,并取的点击了哪个div的who值
                console.log(e.target.id)
                //var file=input_one.files[0] ;


                if (e.target.id=='file_one'){

                    let file01=input_one.files[0] ;
                    let image01 = document.getElementById("img_one");

                    let reader = new FileReader();
                    reader.readAsDataURL(file01);
                    reader.onload = function (e) {

                        image01.src = reader.result;
                        img01_src=reader.result;
                        //console.log(img01_src)
                    }
                    //  接下来，要上传图片，并获得返回的图片的url地址


                }
                if (e.target.id=='file_two'){

                    let file02=input_two.files[0] ;
                    let image02 = document.getElementById("img_two");

                    let reader = new FileReader();
                    reader.readAsDataURL(file02);
                    reader.onload = function (e) {

                        image02.src = reader.result; //
                        img02_src=reader.result;
                    }
                    //  接下来，要上传图片，并获得返回的图片的url地址

                }
                if (e.target.id=='file_three'){

                    let file03=input_three.files[0] ;
                    let image03 = document.getElementById("img_three");
                    let reader = new FileReader();
                    reader.readAsDataURL(file03);
                    reader.onload = function (e) {

                        image03.src = reader.result;
                        img03_src=reader.result;

                    }
                    //  接下来，要上传图片，并获得返回的图片的url地址

                }




            },
            imgOne(){
                input_one = document.getElementById("file_one");
                input_one.click();
            },
            imgTwo(){
                input_two = document.getElementById("file_two");
                input_two.click();
            },
            imgThree(){
                input_three = document.getElementById("file_three");
                input_three.click();
            },

            submit(){ //上传图片和手机号姓名

            }

        }
    })
</script>
</body>
</html>