需求:1.文件进行上传,首先对文件进行MD5加密
2.把MD5加密的字符串传给后端,根据后端的返回值判断需不需要走上传接口
思路1:把action的属性,把其设置为空,直接在before-upload钩子函数中拿到文件,对文件进行加密,然后请求后端接口判断是否需要上传,但是这样就有一个问题就是会一个空接口该接口会报404,且也会影响进度条,导致进度条不准确;所以改思路不符合项目需求
思路2:换成手动上传,思路1用到的是自动上传,手动上传用属性on-change拿到文件,对文件进行加密然后请求后端接口判断该文件是否需要上传,如果需要上传就用submit方法上传
问题:用思路2的还有一个问题就是已存在的文件不需要上传,但是在调试过程中还是会上传上去,所以就需要在判断不需要上传该文件之后对文件手动清除,用到elementui的handleRemove该方法
首先: npm i spark-md5
界面中直接:import SparkMD5 from 'spark-md5'引入即可
<template>
<div>
<el-tabs v-model="activeName">
<el-tab-pane label="上传" name="上传">
<div>
<el-upload
ref="upload"
:auto-upload="false"
:show-file-list="false"
action