這個是上傳中途的截圖

代碼部分

    <template>
    <div class="flex">
        <progress
        id    = "progressBar"
        value = "0"
        max   = "100"
        style = "width: 300px;"
        ></progress>
        <span id="percentage"></span><span id="time"></span>
        <br /><br />
        <input
        type = "file"
        id   = "file"
        name = "myfile"
        />
        <input
        type   = "button"
        @click = "UpladFile()"
        value  = "上傳"
        />
        <input
        type   = "button"
        @click = "cancleUploadFile()"
        value  = "取消"
        />
    </div>
    </template>

    <script>
    export default {
    name: "flex",
    data() {
        return {
        xhr    : "",
        ot     : "",
        oloaded: ""
        };
    },
    mounted() {},
    methods: {
        //上傳文件方法
        UpladFile() {
        let _this   = this;
        let fileObj = document.getElementById("file").files[0];  // js 獲取文件對象
        let url     = "";                                     // 接收上傳文件的后臺地址
        let form    = new FormData();                            // FormData 對象
        form.append("file", fileObj); // 文件對象
        _this.xhr = new XMLHttpRequest();  // XMLHttpRequest 對象
        _this.xhr.open("post", url, true); //post方式，url為服務(wù)器請求地址，true 該參數(shù)規(guī)定請求是否異步處理。
        _this.xhr.onload             = _this.uploadComplete;    //請求完成
        _this.xhr.onerror            = _this.uploadFailed;      //請求失敗
        _this.xhr.upload.onprogress  = _this.progressFunction;  //【上傳進度調(diào)用方法實現(xiàn)】
        _this.xhr.upload.onloadstart = function() {
            //上傳開始執(zhí)行方法
            _this.ot      = new Date().getTime();  //設(shè)置上傳開始時間
            _this.oloaded = 0;                     //設(shè)置上傳開始時，以上傳的文件大小為0
        };
        _this.xhr.send(form); //開始上傳，發(fā)送form數(shù)據(jù)
        },
        //上傳成功響應(yīng)
        uploadComplete(evt) {
        //服務(wù)斷接收完文件返回的結(jié)果
        let data = evt.target.responseText;
        if (data.success) {
            alert("上傳成功！");
        } else {
            alert("上傳失??！");
        }
        },
        //上傳失敗
        uploadFailed(evt) {
        alert("上傳失??！");
        },
        //取消上傳
        cancleUploadFile() {
        let _this = this;
        _this.xhr.abort();
        },
        //上傳進度實現(xiàn)方法，上傳過程中會頻繁調(diào)用該方法
        progressFunction(evt) {
        let _this         = this;
        let progressBar   = document.getElementById("progressBar");
        let percentageDiv = document.getElementById("percentage");
        // event.total是需要傳輸?shù)目傋止?jié)，event.loaded是已經(jīng)傳輸?shù)淖止?jié)。如果event.lengthComputable不為真，則event.total等于0
        if (evt.lengthComputable) {
            progressBar.max         = evt.total;
            progressBar.value       = evt.loaded;
            percentageDiv.innerHTML = 
            Math.round((evt.loaded / evt.total) * 100) + "%";
        }
        let time         = document.getElementById("time");
        let nt           = new Date().getTime();             //獲取當(dāng)前時間
        let pertime      = (nt - _this.ot) / 1000;           //計算出上次調(diào)用該方法時到現(xiàn)在的時間差，單位為s
            _this.ot     = new Date().getTime();             //重新賦值時間，用于下次計算
        let perload      = evt.loaded - this.oloaded;        //計算該分段上傳的文件大小，單位b
            this.oloaded = evt.loaded;                       //重新賦值已上傳文件大小，用以下次計算
        //上傳速度計算
        let speed  = perload / pertime;  //單位b/s
        let bspeed = speed;
        let units  = "b/s";              //單位名稱
        if (speed / 1024 > 1) {
            speed = speed / 1024;
            units = "k/s";
        }
        if (speed / 1024 > 1) {
            speed = speed / 1024;
            units = "M/s";
        }
        speed = speed.toFixed(1);
        //剩余時間
        let resttime       = ((evt.total - evt.loaded) / bspeed).toFixed(1);
            time.innerHTML = 
            "，速度：" + speed + units + "，剩余時間：" + resttime + "s";
        if (bspeed == 0) time.innerHTML = "上傳已取消";
        }
    }
    };
    </script>
    <style scoped>
    .flex {
    width           : 100%;
    height          : 500px;
    background-color: #fff;
    padding         : 20px;
    }
    </style>

找的資料，然后寫入這個vue項目，需要優(yōu)化的地方自行優(yōu)化

這里卿洋
愿喜??