vue-上传文件

佚名 7年前 (2019-05-14) 随笔 1451人围观抢沙发百度已收录

<label for="exampleInputFile">头像</label>
<img :src=" imgsrc != '' ? imgsrc :'../img/timgs.png'" class="iconfont icon-tupian" onclick="strike()" id="headPortraitImgShow" alt="" width="50px" height="50px" />
<input type="file" id="headPortraitUpload" style="margin-top:10px;display: none">

HTML代码

$(function () {
　　$("#headPortraitUpload").on("change",headPortraitListener);
            /*定义全局变量存贮图片信息*/
　　 var base64head="";
            /*头像上传监听*/
    　　　　　 function headPortraitListener(e) {
                var img = document.getElementById('headPortraitImgShow');
                if(window.FileReader) {
                    var file  = e.target.files[0];
                    var reader = new FileReader();
                    if (file && file.type.match('image.*')) {
                        reader.readAsDataURL(file);
                    } else {
                        img.css('display', 'none');
                        img.attr('src', '');
                    }
                    reader.onloadend = function (e) {
                        img.setAttribute('src', reader.result);
                        base64head = reader.result;
                    }
                }
            }
}

function strike() {
　　document.getElementById("headPortraitUpload").click();
}

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

Jquery将图片给img

var formFile = new FormData();
            var sum = document.getElementById("headPortraitUpload").files.length;
            for (var i = 0;i < sum;i++){
                formFile.append("file", document.getElementById("headPortraitUpload").files[i]); //加入文件对象
            }
            if(id){
                formFile.append("id",id);
            }
            formFile.append("account",this.account);
            formFile.append("password",this.password);
            formFile.append("confirmPassword",this.passwords);
            formFile.append("name",this.name);
            formFile.append("mobile",this.phone);
            formFile.append("companyId.id",this.firmdown);
            formFile.append("roles",this.rolelist);
            var header={
                'token':CDK.token,
                'Content-Type': 'multipart/form-data'
            };