element-ui Upload 上传文件

element-ui Upload 上传文件

需求描述：如图所示，upload 只是用来选择文件，在点击提交的时候再和其余的数据统一上传，而且要限制该文件只能上传一个，为用户最后选择的那个文件。

• 不使用 action 属性 上传
  官方文档
  文档中描述到：
  action：是必选参数，上传的地址；
  http-request: 覆盖默认的上传行为，能够自定义上传的实现， 使用该属性的时候设置action 的属性值为#

• 只能上传单个文件，并能覆盖上传
  官网 API 里有一个属性，limit（number 类型），指的是最大容许上传个数，我添加其属性值为 1，（:limit=‘1’）,可是这样，不管怎样选择，页面上展现的始终是用户第一次选择的文件，这个效果…emmm 和咱们想要的不同呢
  继续看官方文档，有个 file-list 属性，指的是上传文件的列表，🉑 ️ 经过文件状态改变时的钩子 on-change 方法，改变 file-list 的文件列表，一直保留最后一项。
  
  模板代码

<el-upload
        class="upload-demo"
        drag
        action="#"
        :multiple="false"
        :show-file-list="true"
        :http-request="uploadHttpRequest"
        :file-list="fileList"
        :on-change="handleUploadChange"
        :before-upload="beforeUpload"
    >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

js 代码

// 上传文件以前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则中止上传。
   data() {
       return {
           // 上传文件的列表
           fileList: [],
       }
   },
   methods: {
       beforeUpload(file) {
        const fileType = file.name.substring(file.name.lastIndexOf('.'))
        if (fileType.toLowerCase() != '.txt' && fileType.toLowerCase() != '.xml') {
            this.$message.error('文件必须为.txt或.xml类型')
            this.fileList = []
            return false
        }
        },
        // 覆盖element的默认上传文件
        uploadHttpRequest(data) {
            let reader = new FileReader()
            let that = this
            reader.readAsText(data.file)
            reader.onload = function() {
                that.formData.mmiapXml = this.result
            }
        },
        // 限制文件上传的个数只有一个，获取上传列表的最后一个
        handleUploadChange(file, fileList) {
            if (fileList.length > 0) {
                this.fileList = [fileList[fileList.length - 1]] // 这一步，是 展现最后一次选择的文件
            }
        },
   }

目前已经实现了基本需求，样式上有点小瑕疵，由于咱们改变是文件列表，已经选择过文件，再次选择文件以后，从第一个文件到第二个文件，有动态切换的效果， 这个特效咱们不须要。在 elment 的 upload 源码中，有这样一个动画：

.el-list-enter-active, .el-list-leave-active {
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

咱们设置 transition 为 none 去掉这一部分动画就能够了，
当

<style lang="less" scoped>

/deep/ .el-list-enter-active,
/deep/ .el-list-leave-active {
    transition: none;
}

/deep/ .el-list-enter,
/deep/ .el-list-leave-active {
    opacity: 0;
}
</style>