Ajax文件上传，vue axios文件上传

Ajax做文件上传就会有兼容性的问题。只有一些高版本的浏览器可以实现文件上传的功能。Ie6 ie7 低版本浏览器不能实现。因为ajax文件上传用到Formdata,它是h5新增的，有兼容问题，低版本浏览器不支持。

数据往formdata中加：

调用formdata的append方法，用原生dom对象的file的第0个获取到上传的文件。发aiax请求，用post请求方式，添加属性。

原生ajax上传代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>

  <p>data</p><input id='data' type="file" name="data" />
  <p>type</p><input id='input1' type="text" value='image/jpg' name="type" />
  <input type="button" value="添加文件" id="btn" />

</body>

</html>
<script>

  btn.onclick = function () {
    // 前后端交互
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "请求接口", true);// 把数据传过去，true：异步 false：同步
    var formData = new FormData();
    formData.append("type", input1.value);
    formData.append("data", data.files[0]);
    xhr.send(formData);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var flag = xhr.responseText;//把响应拿回来
        console.log(flag);
      }
    }
  }

</script>

Jquery ajax上传代码：

注意：在ajax发送请求时要加上以下三个属性：不加会报错

Cache:false

processData:false

contentType:false

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>

  <p>data</p><input id='data' type="file" name="data" />
  <p>type</p><input id='input1' type="text" value='image/jpg' name="type" />
  <input type="button" value="添加文件" id="btn" onclick="test();" />

</body>

</html>
<script>

  function test() {
    var formData = new FormData();

    formData.append("type", input1.value);
    formData.append("data", data.files[0]);

    $.ajax({
      url: "请求接口",
      method: "POST",
      cache: false, // 文件不设置缓存
      data: formData,
      processData: false, // 数据不被转换为字符串
      contentType: false, // 上传文件时使用，避免 JQuery 对其操作
      success: function (result) {
        console.log(result);
      }
    })
  }

</script>

Vue axios上传代码：

      let formData = new FormData();
      formData.append('type', input1.value);
      formData.append('data', data.files[0]);

      axios({
        method: 'post',
        url: "请求接口",
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
        .then(res => {
        })
        .catch(err => {
        });

　　

posted @ 2020-01-14 17:46  执手听风吟  阅读(2207)  评论(0)    收藏  举报