zoukankan      html  css  js  c++  java
  • 饿了么UI el-upload http-request 多文件进度条失效

    <el-upload
                drag
                multiple
                class="drawing-upload"
                show-file-list
                :action="FileModel.uploadObjectUrl"
                :http-request="httpRequest"
                :limit="50"
                :file-list="fileList"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :on-error="handleError"
                :before-upload="beforeUpload"
                :on-exceed="exceed"
            >
                <div class="upload-handle-text">
                    <div class="el-icon-upload" />
                    <div class="upload-tips">拖拽或上传图纸文件</div>
                </div>
    </el-upload>
    /**
    * 自定义上传
    */
    httpRequest (file) {
    const formData = new FormData()
    formData.append('file', file.file)
    const extension = file.file.name.indexOf('.') > -1
    ? `.${file.file.name.split('.').pop()}`
    : ''
    // http-request 进度条
    if (uploadSetting.zip.indexOf(extension) > -1) {
    // FileModel.compressPackageFilterUpload为封装的axios
    return FileModel.compressPackageFilterUpload(formData, this.supportFileType, {
    onUploadProgress: (progressEvent) => {
    const num = progressEvent.loaded / progressEvent.total * 100 | 0
    file.onProgress({ percent: num })
    }
    })
    } else {
    // FileModel.uploadObject为封装的axios
    return FileModel.uploadObject(formData, {
    onUploadProgress: (progressEvent) => {
    const num = progressEvent.loaded / progressEvent.total * 100 | 0
    file.onProgress({ percent: num })
    }
    })
    }
    },

    // 上传文件(表单上传,MultipartFile形式),返回文件对象
    uploadObject (formData, config) {
    // 注意文件系统不需要加 apis 前缀
    return request.post(`${methodsPrefix}/file-systems/multipart-file/file-system`, formData, {
    headers: { 'Content-Type': 'multipart/form-data' },
    ...config
    })
    }

    el-upload 使用 http-request的时候,进度条会不显示。要想显示进度条,所以在http-request的时候要加上onUploadProgress监听进度,然后调用饿了么的文件对象file.onProgress({ percent: num })更新进度,

    有必要的话还需要调用file.onSuccess()方法更新文件上传成功状态

  • 相关阅读:
    HDU2438:Turn the corner(三分)
    XTU1267:Highway(LCA+树的直径)
    HDU6024:Building Shops(DP)
    “玲珑杯”ACM比赛 Round #13 B -- 我也不是B(二分排序)
    XTU1266:Parentheses(贪心+优先队列)
    Educational Codeforces Round 21 D
    Educational Codeforces Round 21E selling souvenirs (dp)
    EOJ3247:铁路修复计划
    关于工厂模式的 个人理解
    设计模式之 工厂方法
  • 原文地址:https://www.cnblogs.com/kaibo520/p/14980702.html
Copyright © 2011-2022 走看看