zoukankan      html  css  js  c++  java
  • element el-upload自定义上传显示进度条,多文件上传进度

    <template>
        <div>
            <el-upload
                    class="upload-demo"
                    ref="upload"
                    :multiple="false"
                    action="void"
                    :http-request="customUpload"
                    :on-remove="handleRemove"
                    :on-progress="progressA"
                    :file-list="fileList"
                    multiple
                    :auto-upload="true">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                    fileList: [],
                }
            },
            components: {},
            mounted() {
            },
            methods: {
                customUpload(file) {
                    let FormDatas = new FormData();
                    FormDatas.append('file', file.file);
                    this.$axios({
                        url: 'http://192.168.1.5:8889/upload',
                        method: 'post',
                        data: FormDatas,
                        //上传进度
                        onUploadProgress: (progressEvent) => {
                            let num = progressEvent.loaded / progressEvent.total * 100 | 0;  //百分比
                            file.onProgress({percent: num})     //进度条
                        }
                    }).then(data => {
                        file.onSuccess(); //上传成功(打钩的小图标)
                    })
                },
                /**     文件正在上传时的钩子    **/
                progressA(event, file) {},
                /**     移除上传文件    **/
                handleRemove(file) {
                    this.$refs.upload.abort(); //取消上传
                    this.$message({message: '成功移除' + file.name, type: 'success'});
                },
            },
        }
    </script>
    <style>
    </style>
  • 相关阅读:
    Redis
    vscode
    uget + aria2
    Nodejs 安装
    NPM
    ?Swift获取手机设备信息
    C语言的32个关键字
    MVC-Html.Label(TextBox、TextArea、RadioButton、CheckBox)
    常用正则表达式
    MVC-Razor引擎布局
  • 原文地址:https://www.cnblogs.com/ygunoil/p/12468816.html
Copyright © 2011-2022 走看看