• 调起相册上传图片


        <div id="box">
            <header class="weui-header">
                <a href="javascript:history.go(-1)" class="ui-icon ui-left">
                    <span class="iconfont icon-back"></span>
                </a>
                <div class="hd-title">更换头像</div>
            </header>
            <div class="weui-content">
                <div class="upload-cells">
                    <div class="upload-pic" id="result">
                        <img :src="head_pic" alt="" id="imgshow" />
                        <a href="javascript:;" class="upload-button button">
                            <input type="file" class="photo" accept="image/*" id="user" name="file" @change="photo"> 从相册选一张
                        </a>
                        <!-- <a href="javascript:;" class=" upload-button button">
                            <input type="file" class="camera" name="cover" accept="image/*" capture="camera" multiple
                                id="camera" @change="photo"> 拍一张照片
                        </a> -->
                    </div>
                </div>
            </div>
        </div>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                token: "",
                head_pic: "",
            },
            created: function () {
                var that = this
                that.token = sessionStorage.getItem('token')
                that.head_pic = sessionStorage.getItem('head_pic')
                console.log(that.token)
            },
            methods: {
                photo: function () {
                    var that = this
                    var files = $("#user").get(0).files[0]; //获取file控件中的内容
                    var reader = new FileReader();
                    reader.readAsDataURL(files);
                    reader.onload = function (f) {
                        var result = document.getElementById("result");
                        // console.log(this.result)
                        document.getElementById("imgshow").src = this.result;  //预览图片
                    }
                    var formData = new FormData();
                    formData.append("head_pic", files);
                    formData.append("token", that.token);
                    // var data = {
                    //  head_pic:files,
                    //  token:that.token
                    // }
                    $.ajax({
                        type: "POST",
                        url: "http://qukuailian.txunda.com/Api/Member/uploadpic", //接口请求地址
                        processData : false,
                        contentType : false,
                        async:false,
                        data:formData,
                        success: function(data) {
                            console.log(3)
                            layer.msg(JSON.parse(data).message)
                            var data = JSON.parse(data);
                            console.log("请求成功之后,调用接口返回的数据");
                        }
                    }); 
                },
            }
        });
    </script>

     

  • 相关阅读:
    集体编程智慧(发现的一些代码问题)
    jQuery实现图片伦播效果(淡入淡出+左右切换)
    require
    小技巧
    JavaScript--面向对象--猜拳游戏
    简单封装cookie操作
    less
    进程相关

    线程和进程相关
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/10638183.html
Copyright © 2020-2023  润新知