Vue实现文件上传（带进度条和取消上传功能）

演示效果

uploadfile.gif

代码实现

这里我只写了单一文件上传的demo，并且只限制了文件大小不能超过5M。如果想限制上传的文件类型，可自行在input标签中进行设置，如果想要实现多个文件一起上传，先要设置input标签属性multiple="multiple"，然后利用循环将每一个文件数据存入到formData中，最后作为参数传给服务端进行处理。
因为个人习惯原因，我先对axios进行了封装，创建service.js文件，代码如下：

import axios from "axios"; //引入axios
const instance = axios.create({
  timeout: 300000,
});
// let baseURL = process.env.BASE_URL.toString();
//这里根据自己项目接口的位置自行设定
let baseURL = "http://1xx.1xx.1xx.1xx/hyr";
if (process.env.NODE_ENV == "production") {
  baseURL = "http://1xx.1xx.1xx.1xx/hyr";
}
instance.defaults.baseURL = baseURL; //baseURL用于自动切换本地环境接口和生产环境接口
instance.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";
instance.defaults.headers.post["Access-Control-Allow-Origin"] = "*";
instance.defaults.withCredentials = false; // 携带cookie
//上传附件axios接口封装
const upload ={
  uploadFile(url, payload, cancelToken, cd) {
    return instance({
      url: url,
      method: "post",
      data: payload,
      onUploadProgress: function(progressEvent) {
        if (progressEvent.lengthComputable) {
          cd(progressEvent);
        }
      },
      cancelToken: cancelToken,
    });
  },
}
export {
  upload,
  axios,
}

在创建一个vue文件，将上述封装方法引入，代码如下：

结束语

以上代码复制粘贴到自己的vue项目中就能够正常运行，如有错误或需要改进的地方还请与我联系，我将及时进行改正。