使用 ref 和 $refs
参考:
比较方便取 DOM, 方便操作 DOM
- <template>
- <form action="">
- <input type="file" ref="reffire" name="name" @change="changeselector"
- />
- <input type="button" value="done" @click="exp()" />
- </form>
- </template>
- <script>
- export
- default {
- data() {
- return {
- filename:
- '',
- size: '',
- }
- },
- methods: {
- changeselector() {
- let file = this.$refs.reffile; //[object htmlInputElement]
- let fileone = file.files[0]; // 当前文件
- this.filename = fileone.name; // 当前文件名
- let filesize = fileone.size; // 当前文件大小
- this.size = filesize;
- this.filetype = file.files[0].type;
- var a = this.filename; // 文件名
- var b = a.split(".")[0]; // 前缀
- var c = a.split(".")[1]; // 后缀
- },
- exp() {
- var a = this.filename;
- var b = a.split(".")[0];
- var c = a.split(".")[1];
- let file = {
- name: a,
- type: d
- }
- if (!/\.(xls|xlsx|pptx|ppt|doc|docx|txt|pdf|jpg|png|bmp|mp3|mp4)$/.test(this.fileName)) {
- this.Toast("error", 2000)
- }
- if (!this.file) {
- //...
- }
- this.$emit('addFile', file) let formdata = new FormData();
- formdata.append('file', this.file); //append() 方法用于向 FormData 对象中添加键值对:
- let that = this;
- request.UPLOAD(UPLOAD_RES, formdata,
- function(response) {
- let loaded = response.loaded;
- let total = that.size;
- }).then(res =>{
- let params = {
- name: c;
- resourceId: res.data.data.file.rid;
- contentType: d
- }
- request.POST(COURSE_WARE.params).then(success =>{
- this.Toast('success', 2000)
- }).
- catch(error =>{
- console.log(error)
- }) console.log(res)
- }).
- catch(err =>{
- console.log(err)
- })
- },
- //toast
- // 自定义弹框
- function Toast(msg, duration) {
- duration = isNaN(duration) ? 3000 : duration;
- var m = document.createElement('div');
- m.innerHTML = msg;
- m.style.CSSText = "width:60%; min-width:150px; background:#000; opacity:0.5; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:5px; position:fixed; top:40%; left:20%; z-index:999999; font-weight:bold;";
- document.body.appendChild(m);
- setTimeout(function() {
- var d = 0.5;
- m.style.webkitTransition = '-webkit-transform' + d + 's ease-in, opacity' + d + 's ease-in';
- m.style.opacity = '0';
- setTimeout(function() {
- document.body.removeChild(m)
- },
- d * 1000);
- },
- duration);
- }
- </script>
来源: http://www.qdfuns.com/article/13740/add337010878c6ca84b8ee655eceacdf.html