文件上传XMLHttpRequest和axios

一、原生模式

var xhr = new XMLHttpRequest();

      var url = process.env.VUE_APP_BASE_API + '/system/import';

      xhr.open('POST', url, true);  

      xhr.upload.onprogress = function(event) {

        if (event.lengthComputable) {

          var percentComplete = (event.loaded / event.total) * 100;

          // console.log(percentComplete.toFixed(2) + '%');

        }

      };  

      xhr.onload = function() {

        if (xhr.status === 200) {

          resolve();

        } else {

          reject();

        }

      };

      xhr.send(data);

二、axios方式

let formData = new FormData();

    formData.append('file', this.fileList);

    formData.append('parentId', "0");

    this.$http({

        method: 'post',

        url: this.$api.upLoadFile,

        headers:{ 'Content-Type': 'multipart/form-data'},

        transformRequest:[],

        data: formData

    }).then(res=>{

        console.log(res)

    })

  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Ajax是一种用于在浏览器和服务器之间进行异步通信的技术,可以在不重新加载整个页面的情况下更新部分页面内容。而Axios和Fetch则是用于发出Ajax请求的JavaScript库,它们提供了一种简单的方法来实现Ajax请求。Axios支持Promise API,并具有拦截器和取消请求功能,而Fetch提供了更简单的API,但没有拦截器和取消功能。 ### 回答2: ajax、axios和fetch都是用于发送异步请求的工具,但在使用上有一些区别。 1. Ajax是一种基于原生的XMLHttpRequest对象实现的异步请求技术。它可以发送HTTP请求并接收服务器返回的数据。Ajax可以通过监听XMLHttpRequest对象的状态变化来实现异步请求和处理响应。但是,Ajax使用起来繁琐,需要编写大量的代码,并且兼容性也有一定问题。 2. Axios是一个基于Promise的HTTP客户端库。它可以在浏览器和Node.js中使用。Axios提供了简洁的API,可以轻松发送HTTP请求,并处理响应。Axios在使用上比较简单,提供了更多的功能,比如拦截器、取消请求、带进度的上等。Axios也兼容各种现代浏览器。 3. Fetch是基于原生的Fetch API实现的异步请求方法。它提供了一组可用于发送和处理HTTP请求的接口。Fetch使用Promise对象来处理响应,使得异步请求能够更加简洁易用。Fetch的API设计更加简单明了,但还比较新,兼容性不如Axios。 综上所述,Ajax是一种统的异步请求技术,使用上比较繁琐;Axios是一个功能丰富且易用的HTTP客户端库;Fetch是一种新的基于Fetch API的异步请求方法,使用上简单但兼容性相对较差。在选择使用时,可以根据具体需求和项目情况来选择。 ### 回答3: Ajax、axios和fetch 都是用于发送异步请求的工具,主要用于前端与后端进行数据交互。虽然它们都有相似的功能,但也有一些区别。 Ajax 是一种基于 XMLHttpRequest 对象的技术,它可以在不刷新整个页面的情况下与服务器进行数据交互。Ajax 使用起来相对简单,但需要手动处理各种回调函数。 Axios 是一个基于 Promise 的 HTTP 客户端工具,它可以在浏览器和 Node.js 中使用。axios 提供了更方便的API来处理请求和响应,并支持拦截器、取消请求和并发请求等功能。它还可以自动将请求的数据转换为 JSON 格式,并提供了更好的错误处理机制。 Fetch 是浏览器内置的一个原生 API,用于发送和接收数据。它基于 Promise,也提供了一些处理请求和响应的方法。Fetch 使用起来更加简洁,代码量更少,但在功能上相对较少,需要手动处理一些细节,比如请求的头部、错误处理等。 从使用上来说,Axios 和 Fetch 更加易用,提供了更好的抽象和封装,使得代码更加简洁易懂。它们还提供了更多的选项和功能,比如设置请求超时、设置请求头部、上文件等。 总的来说,Ajax、axios和fetch 都是可以用来进行异步请求的工具,但它们在使用方式、功能以及易用性上存在一些差异。选择哪个工具主要取决于具体的需求和个人偏好。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值