VUE文件上传
HTML:v-show="fileupView" id="fileSelect" name="fileSelect" @change="update" ref="inputer"type="file"/>label="文件打开" class="demo-raised-button" @click="fileopen" primary>label="文件上传" class="de
·
HTML:
<input v-show="fileupView" id="fileSelect" name="fileSelect" @change="update" ref="inputer" type="file"/>
<mu-raised-button label="文件打开" class="demo-raised-button" @click="fileopen" primary></mu-raised-button> <mu-raised-button label="文件上传" class="demo-raised-button" @click="fileupdate" primary></mu-raised-button>
将原始的控件input设置成影藏v-show显示。
VUE:
//原生按钮的属性获取(可优化至新按钮事件去)
update: function () { let inputDOM = this.$refs.inputer; // 通过DOM取文件数据 this.file = inputDOM.files[0]; console.log("inputDOM.files[0]:"+inputDOM.files[0]); if(inputDOM.files[0] === undefined){ this.fileName = ''; this.fileSize = ''; this.fileType = ''; } else{ this.fileName = this.file.name; //kb if(this.file.size/1024<1000){ this.fileSize = (this.file.size/1024).toFixed(2) +"kb"; } else if(this.file.size/1024>1000){ this.fileSize = ((this.file.size/1024)/1024).toFixed(2) +"MB"; } this.fileType = this.file.type; } },
//用新button按钮去替换原始的控件 fileopen:function () { var fileSelect = document.getElementById("fileSelect"); fileSelect.click(); },
//上传按钮的事件axios fileupdate:function () { let inputDOM = this.$refs.inputer; // 通过DOM取文件数据 this.file = inputDOM.files[0]; var formdata = new FormData(); formdata.append('fileSelect',inputDOM.files[0]); axios({ url: 'update', method: 'post', data: formdata, headers: {'Content-Type': 'application/x-www-form-urlencoded'} }).then(function (re) { console.log(re); }) .catch(function (err) { console.log(err); }) },
更多推荐
已为社区贡献2条内容
所有评论(0)