vue实现文件上传，纯js

在实现公司业务时，打算自己一个文件上传组件，于是着手写了一下，下面是实现步骤：
1、先是手动创建一个上传按钮样式，实现如下：

<template>
    <div class="preview" >
        <span class="removeBtn" @click="removePic"><van-icon name="delete"></van-icon></span>
    </div>

    <div class="diy-upload">
        <div class="plus">+</div>
        <input v-if="columnName === '视频'"
               class="videoInput"
               type="file"
               accept="video/*"
               @change="uploadFile($event)"
               name="fileTrans">
        <input v-if="columnName === '文档'"
               class="videoInput"
               type="file"
               accept=".doc, .docx, .xml, .xlsx"
               @change="uploadFile($event)"
               name="fileTrans">
        <input v-if="columnName === '音频'"
               class="videoInput"
               type="file"
               accept="audio/*"
               @change="uploadFile($event)"
               name="fileTrans">
        <input v-if="columnName === '图片'"
               class="videoInput"
               accept="image/*"
               type="file"
               @change="uploadFile($event)"
               name="fileTrans">
        <input class="diy-submit" type="submit"/>
    </div>
</template>

<style lang="less" scoped>
    .upload{
        padding: 140px 36px 160px 36px;
        box-sizing: border-box;
    }
    .diy-upload{
        position: relative;
        margin: 0 auto;
        width: 160px;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        background-color: #fff;
        border: 2px dashed #e5e5e5;
        cursor: pointer;
        .plus{
            color: #969799;
            font-size: 24px;
            /*z-index: 666;*/
            position: absolute;
            top: 0;
            left: 0;
            width: 160px;
            height: 160px;
            /*background: #333333;*/
            text-align: center;
            line-height: 160px;
        }
        .videoInput{
            position: absolute;
            width: 160px;
            height: 160px;
            overflow: hidden;
            opacity: 0;
        }
    }
    .preview{
        position: relative;
        margin-top: 10px;
        display: none;
        /*border: 2px solid #dedede;*/
        text-align: center;
        span:nth-of-type(1){
            width: 32px;
            height: 32px;
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 10000;
            font-size: 26px;
            color: #fff;
        }
        span:nth-of-type(2){
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            top: -15px;
            right: -15px;
        }
    }
    .diy-detail{
        width: 100%;
        overflow: hidden;
        .btn{
            span{
                margin-bottom: 10px;
            }
        }
        .van-cell{
            background-color: #F0F0F0;
            border-radius: 35px;
            font-size: 26px;
            height: 69px;
            line-height: 69px;
            padding: 0 22px;
            color: #999;
        }
        .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
            border-width: 0;
        }
        p{
            height: 64px;
            line-height: 64px;
            font-size: 32px;
            color: #333;
            position: relative;
            padding-left: 16px;
        }
        p::before{
            position: absolute;
            top: 0;
            left: 0;
            content: '*';
            color: #FF0000;
        }

        span{
            display: inline-block;
            width: 157px;
            background: #F0F0F0;
            border-radius: 35px;
            color: #999;
            font-size: 26px;
            padding: 14px 18px;
            margin-right: 28px;
            text-align: center;
        }
        .active{
            color: #fff;
            background: linear-gradient(to right,#FD5130,#FA6C34);
        }
    }
    .diy-submit {
        position: fixed;
        height: 150px;
        width: 90%;
        bottom: 0;
        background: #fff;

        .van-button {
            width: 100%;
            height: 90px;
            border-radius: 45px;
            font-size: 36px;
            color: #fff;
            background: linear-gradient(to right, #FD5130, #FA6C34);
            top: 50%;
            transform: translate(0, -50%);
        }
        .van-button--default {
            border: none;
        }
    }
</style>

样式如下

功能实现如下：

<script>
    import VHeader from '../../common/header'
    import {classifyList, uploadFile, addResources} from '../../http/mock'
    import Toast from 'vant'
    export default {
        name: "uploadFile",
        components: {
            VHeader
        },
        data(){
            return{
                tagList: [],
                uploadTitle: '',
                currentTag: null,
                tagId: null,
                columnName: localStorage.getItem('columnName'),
                fileIdArr: [],

                uploadVideoList: [],
                videoSrc: '',
                uploadDocList: [],
                uploadAudioList: [],
                uploadPicList: [],
                picSrc: '',
            }
        },
        filters: {
            formatSize(val) {
                if (val > 0) {
                    return (val / 1024 / 1024).toFixed(2) + 'M';
                } else {
                    return '0M';
                }
            },
        },
        methods: {
            uploadFile(val){
                let input = document.querySelector('input');
                let preview = document.querySelector('.preview');
                let uploadDiv = document.querySelector('.diy-upload');
                let timerDesc = document.querySelector('.timer');
                uploadDiv.style.display = 'none';
                preview.style.display = 'block';
                let files = input.files;
                if (!files.length){
                    return;
                }
                let size = files[0].size/1024/1024;  // 獲取文件的大小

                let columnName = localStorage.getItem('columnName')
                let formData = new FormData();
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                if(columnName === '视频'){
                    formData.append(encodeURI(val.target.files[0].name), val.target.files[0]);
                    let video = document.createElement('video');
                    video.className = 'addDiv';
                    video.style.maxHeight = '215px';
                    video.style.width = '100%';
                    video.src = files[0].name;
                    timerDesc.innerHTML = '上傳時間：' + this.$moment(files[0].lastModifiedDate).format('YYYY-MM-DD');
                    preview.style.background = '#000';
                    preview.appendChild(video);
                    video.src = window.URL.createObjectURL(files[0]);
                    video.autoPlay = 'autoplay';
                    video.preload = 'auto';
                } else if(columnName === '文档'){
                    formData.append(encodeURI(val.target.files[0].name), val.target.files[0]);
                    preview.style.textAlign = 'left';
                    let doc =  document.createElement('div');
                    let docImg = document.createElement('img');
                    let docTitle = document.createElement('span');
                    let docSize = document.createElement('span');
                    doc.className = 'addDiv';
                    docImg.style.display = 'inline-block';
                    docImg.style.cssFloat = 'left';
                    docImg.style.width = '28px';
                    docImg.style.height = '28px';
                    docImg.style.marginRight = '5px';
                    docImg.src = require('../../assets/img/[e-mail]');
                    docTitle.style.cssFloat = 'left';
                    docTitle.style.fontSize = '14px';
                    docTitle.style.marginRight = '30px';
                    docTitle.style.lineHeight= '28px';
                    docTitle.innerText = files[0].name;
                    docSize.style.cssFloat = 'left';
                    docSize.style.lineHeight= '28px';
                    docSize.innerText = size.toFixed(2) + 'M';
                    doc.appendChild(docImg);
                    doc.appendChild(docTitle);
                    doc.appendChild(docSize);
                    preview.appendChild(doc);
                } else if(columnName === '音频'){
                    formData.append(encodeURI(val.target.files[0].name), val.target.files[0]);
                    preview.style.textAlign = 'left';
                    let audioDiv = document.createElement('div');
                    let audioImg = document.createElement('img');
                    let audioTitle = document.createElement('span');
                    let audioSize = document.createElement('span');
                    audioDiv.className = 'addDiv';
                    audioImg.style.display = 'inline-block';
                    audioImg.style.cssFloat = 'left';
                    audioImg.style.width = '28px';
                    audioImg.style.height = '28px';
                    audioImg.style.marginRight = '5px';
                    audioImg.src = require('../../assets/img/[e-mail]');
                    audioTitle.style.cssFloat = 'left';
                    audioTitle.style.marginRight = '30px';
                    audioTitle.style.fontSize = '14px';
                    audioTitle.style.lineHeight = '28px';
                    audioTitle.innerText = files[0].name;
                    audioSize.style.cssFloat = 'left';
                    audioSize.style.lineHeight = '28px';
                    audioSize.innerText = size.toFixed(2) + 'M';
                    audioDiv.appendChild(audioImg);
                    audioDiv.appendChild(audioTitle);
                    audioDiv.appendChild(audioSize);
                    preview.appendChild(audioDiv);
                }else if(columnName === '图片'){
                    formData.append(encodeURI(val.target.files[0].name), val.target.files[0]);
                    preview.style.textAlign = 'center';
                    preview.style.background = '#000';
                    preview.style.width = '100%'
                    let picImg = document.createElement('img');
                    picImg.className = 'addDiv';
                    picImg.src =  window.URL.createObjectURL(files[0]);
                    console.log(picImg.src);
                    picImg.style.width = '100%';
                    picImg.style.maxHeight = '215px';
                    picImg.style.margin = '0 auto';
                    preview.appendChild(picImg);
                }

                this.$api.post(uploadFile, formData, config).then(res => {
                    this.fileIdArr = res.data.data;   // 把選中的文件傳送給後台
                }).catch(err => {
                    Toast('文件上傳失敗！')
                })
            },
            // 移除创建的所有元素，并显示隐藏上传按钮
            removePic(){
                let uploadDiv = document.querySelector('.diy-upload');
                let timerDesc = document.querySelector('.timer');
                let preview = document.querySelector('.preview');
                let image = preview.querySelector('.addDiv');
                preview.removeChild(image);
                preview.style.display = 'none';
                uploadDiv.style.display = 'block';
                timerDesc.innerHTML = '';
                // console.log('input', document.querySelector('input'));
            },
            doSubmit(){
                let params = {
                    classify: this.tagId,        // 针对视频资源时对应的分类id
                    file: this.fileIdArr,   // 选择完文件后，调用uploadFile这个接口，后端返回的数组
                    resourceColumnId: JSON.parse(localStorage.getItem('columnId')),   // 资源栏目id(视频、图片、音频、文档)
                    title: this.uploadTitle    // 上传时填写的标题
                };
                let columnName = localStorage.getItem('columnName')
                this.$api.post(addResources, params).then(res => {
                    if(res.data.code === 1001){
                        if(columnName === '视频'){
                            this.$router.push({name: 'myVideo'});
                        }else {
                            this.$router.push({name: 'myResourceClassify'});
                        }
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
        },
    }
</script>

这段代码有点bug，就是当选中了上传的文件后，再把选中的文件删除掉，不能再选中前面选中过的，这个bug初步判断是因为，再次选中删除的文件，此时文件不能再被选中，导致没有获取到当前文件，还需要再进一步排查解除产生bug的原因