文件上传取消请求

通过请求配置参数里面的 cancelToken 可取消请求，通过CancelToken.source工厂方法创建一个 cancel token。

需求：在文件上传的基础上，加入取消请求和继续上传功能。

一、改造上传功能：

1、在上传功能中的 sendAjax 方法中创建 CancelToken，并调用其 source() 方法。

var CancelToken = this.$axios.CancelToken;
var source = CancelToken.source();
this.source = source;

2、在请求体上添加取消标识。

// 携带取消标识
cancelToken:source.token,

3、记录当前文件上传的进度，继续上传功能要使用。

// 记录当前加载的进度
this.currentLoaded = progressEvent.loaded;

 

二、取消功能：

1、添加取消请求按钮，并绑定点击事件 cancel 。

<button @click='cancel'>取消请求</button>

2、在取消事件里面通过 source 调用 cancel() 方法取消请求。

this.source.cancel('请求被取消');

三、继续上传功能：继续上传功能和上传功能一样，只是将文件进行分割，上传剩下的文件。

1、获取文件未上传的部分。调用 slice 方法，将当前文件进行分割。

// 文件分割  剩下文件的大小
var fileData = this.file.slice(this.currentLoaded, this.file.size);

2、将文件未上传的部分添加到 FormData 对象中。注意，文件名必须保持一致。

var fd = new FormData();
fd.append('file',fileData);

3、在上传进度条 onUploadProgress 中重新计算进度值。

// 总进度=已经上传的进度+正在上传的进度
this.currentLoaded += progressEvent.loaded;
// 计算进度
var progress = (this.currentLoaded/progressEvent.total)*100;

 

 案例完整代码如下：

    <script type="text/javascript">
        var App = {
            template:` 
                <div>
                    选择文件：{{rate}}%
                    上传进度：
                    <input type="file" name='file' @change='changeHandler' />
                    <button @click='sendAjax'>发送请求</button>
                    <button @click='cancel'>取消请求</button>
                    <button @click='resume'>继续上传</button>
                </div>
            `,
            data(){
                return{
                    file:{},
                    rate:0,
                    source:null,
                    currentLoaded:0
                }
            },
            methods:{
                cancel(){
                    this.source.cancel('请求被取消');
                },
                resume(){
                    var CancelToken = this.$axios.CancelToken;
                    var source = CancelToken.source();
                    this.source = source;
                    // 文件分割  剩下文件的大小
                    var fileData = this.file.slice(this.currentLoaded, this.file.size);
                    console.log(fileData);
                    var fd = new FormData();
                    fd.append('file',fileData);
                    this.$axios.post('upload',fd,{
                        // 携带取消标识
                        cancelToken:source.token,
                        // 上传进度条
                        onUploadProgress:(progressEvent)=>{
                            // 对原生进度事件处理
                            console.log(progressEvent);
                            // 总进度=已经上传的进度+正在上传的进度
                            this.currentLoaded += progressEvent.loaded;
                            // 计算进度
                            var progress = (this.currentLoaded/progressEvent.total)*100;
                            console.log(progress);

                            this.$nextTick(function(){
                                this.rate = Math.ceil(progress);
                            }) 
                        },
                    })
                    .then(res=>{
                        console.log(res);
                    })
                    .catch(err=>{
                        console.log(err);
                    })
                },
                sendAjax(){
                    this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/';
                    var CancelToken = this.$axios.CancelToken;
                    var source = CancelToken.source();
                    this.source = source;
                    var fd = new FormData();
                    fd.append('file',this.file);
                    this.$axios.post('upload',fd,{
                        // 携带取消标识
                        cancelToken:source.token,
                        // 上传进度条
                        onUploadProgress:(progressEvent)=>{
                            // 对原生进度事件处理
                            console.log(progressEvent);
                            // 记录当前加载的进度
                            this.currentLoaded = progressEvent.loaded;
                            var progress = (progressEvent.loaded/progressEvent.total)*100;
                            console.log(progress);
                            this.$nextTick(function(){
                                this.rate = Math.ceil(progress);
                            }) 
                        },
                    })
                    .then(res=>{
                        console.log(res);
                    })
                    .catch(err=>{
                        console.log(err);
                    })
                },
                changeHandler(e){
                    console.log(e.target.files[0]);
                    this.file = e.target.files[0];
                }
            }
        }
        // 将axios挂载到Vue对象上
        Vue.prototype.$axios = axios

        new Vue({
            el:'#app',
            template:` 
                <App/>
            `,
            components:{
                App
            }
        });
    </script>