Elment-UI的upload组件改写成纯前端处理文件内容

<template>

    <el-upload

        class="uploadFile"

        ref="upload"

        drag

        action="aa"

        :on-change="onChange"

        :auto-upload="false"

        :file-list="fileList"

        multiple>

        <i class="el-icon-upload"></i>

        <div class="el-upload__text">将要文件拖到此处，或<em>点击上传</em></div>

        <div class="el-upload__tip line-height-none" slot="tip">推荐文件最大不超过10M，最多提交10个文件</div>

    </el-upload>

</template>

	import { digestGeneration } from '@/utils/hash.js'
	export default {
	    data () {
	        return {
				fileList: [],
				uploadFileNum: '',
				fileNameList: [],
				uploadDigestList: [],
				digest: '1' // 默认MD5摘要算法,必须用'0'或'1'
	        }
	    },
		methods: {
			// 文件只需要到达浏览器然后运算得到hash摘要即可，不需要到达后端，所以这里不需要上传到某个地址
			// 每次文件上传，就记录文件名，并摘要生成记录，然后显示在一侧的表格中
			onChange(file, fileList) {
				// 限制同时上传文件的个数，并且不能上传同名文件
				if (this.uploadFileNum >= 10) {
					this.$message.error('最多同时签名10个文件！')
				} else if (this.fileNameList.includes(file.name)) {
					this.$message.error('不可以上传同名文件！')
				} else {
					let thiss = this
					digestGeneration(this.digest, file).then(function (result) { // digest是为了区分hash生成使用的是哪种算法
						thiss.uploadFileNum ++ // 统计上传文件数，这里没有使用el-upload的上传文件个数限制
						thiss.uploadDigestList.push(result) // 自行对结果进行任意处理
						thiss.fileNameList.push(file.name) // 用于记录文件名以判断是否同名
						console.log(thiss.uploadFileNum) // 查看上传的文件个数
						console.log(file.name) // 查看上传的文件名
						console.log(result) // 查看文件的hash摘要结果
						return result
					})
				}	
			}
		}
	}



---

注意：

1. 上一篇的摘要生成文件我这里是定义为“hash.js”，导入文件地址自行修正，不能照搬

2. 本文时基于vue项目下使用的Element-UI

3. 本文对该组件的改写主要是继续“欺骗”组件要把文件上传的服务器地址，然后在文件上传到浏览器缓存触发change事件时对文件进行处理（或者做一些事情）

4. 本文主要是上一篇的摘要生成使用，如果实际运用不包含文件摘要生成，则可以进行同位置替换

ps：

小菜鸟，考虑不周的地方请海涵以及指正

强烈建议拿去使用的时候进行优化改写