vue-上传文件

<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();
}

 

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'
            };

axios请求时,注意加上请求头,以FormData转换

原文地址:https://www.cnblogs.com/weilizou/p/10861216.html