vue使用el-upload重写上传当上传失败时文件展示消失

可能是dom树渲染时没有捕捉到:file-list="fileList"绑定的fileList的变化

正常来说调用$forceUpdate应该可以解决,但是却没有生效

//重写上传函数
httpRequest(){
    api.request()
    .then((res)=>{
        if(res && res.code === "200"){
            this.fileList.push(res.data)
        }else{
            this.fileList = this.fileList.map(v => v)
        }
    })
}

通过对绑定的fileList进行重新更新文件得到了显示

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用以下方法: 1. 安装crypto-js库: ``` npm install crypto-js ``` 2. 引入crypto-js库: ```javascript import CryptoJS from 'crypto-js' ``` 3. 在el-upload组件的before-upload事件中,利用FileReader读取文件内容,然后根据上传的chunk大小进行分块计算文件的sha256: ```html <el-upload class="upload-demo" ref="upload" :action="uploadUrl" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> ``` ```javascript beforeUpload(file) { const reader = new FileReader() const chunkSize = 1024 * 1024 // 分块大小为1MB const chunks = Math.ceil(file.size / chunkSize) const sha256List = [] const _this = this reader.onload = function() { const sha256 = CryptoJS.SHA256(CryptoJS.lib.WordArray.create(this.result)) sha256List.push(sha256) if (sha256List.length === chunks) { const fileSha256 = CryptoJS.SHA256(CryptoJS.lib.WordArray.create(sha256List.reduce((prev, curr) => { return prev.concat(curr) }, []))) console.log(fileSha256.toString()) // 将文件sha256保存到formData中 const formData = new FormData() formData.append('file', file) formData.append('sha256', fileSha256.toString()) // 调用上传接口 _this.$refs.upload.submit(formData) } else { readNext() } } function readNext() { const start = sha256List.length * chunkSize const end = Math.min(file.size, start + chunkSize) reader.readAsArrayBuffer(file.slice(start, end)) } readNext() // 返回false,阻止文件上传 return false } ``` 以上代码中,利用FileReader读取文件的内容,然后根据上传的chunk大小进行分块计算文件的sha256,将计算出的sha256保存到数组中。当所有分块的sha256计算完成后,再将所有分块的sha256合并计算出文件的sha256,并将文件的sha256保存到formData中。最后调用上传接口上传文件和sha256。 注意:在调用上传接口,需要使用ref属性获取el-upload组件的实例,然后调用submit方法上传文件和sha256。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值