VUE文件上传

最新推荐文章于 2024-05-14 16:20:56 发布

captaintao

最新推荐文章于 2024-05-14 16:20:56 发布

阅读量1.5w

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/taotaox/article/details/79105554

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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