js上传文件

<!DOCTYPE html>
<html lang="en">

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

<body>
  <form name="form1" id="form1">
    <p>photo:<input type="file" name="file" id="photo"></p>
    <p><input type="button" name="b1" value="submit" id="m-btn"></p>
  </form>
  <div id="result"></div>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script type="text/javascript">
  $(function() {
    var myAction = {}

    let ajaxConfig = {
      host: 'http://10.10.10.65',
      authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJrZW4iLCJpYXQiOjE1NDYwNzQ3NTYsImRhdGEiOnsidXNlcm5hbWUiOiJ4dXRvbmdiYW8iLCJpc19zdXBlcnVzZXIiOjEsImlkIjo5LCJsb2dpbl90aW1lIjoxNTQ2MDc0NzU2fSwiZXhwIjoxNTQ2Njc0NzU2fQ.ntmWGZRVIxBpcc0EEZ3rTGyVL8SPmRbItYr4znShITU'
    }

    var dom = {
      btn: $('#m-btn')
    }

    $.extend(myAction, {
      initEvent: function() {
        dom.btn.on('click', function() {
          myAction.send2()
        })
      },
      send1: function() {
        var form = document.getElementById("form1");
        var formData = new FormData(form);
        $.ajax({
          url: ajaxConfig.host + "/api/v2/tasks/upload_file",
          type: "POST",
          beforeSend: function(XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Authorization", ajaxConfig.authorization);
          },
          data: formData,
          processData: false, // 告诉jQuery不要去处理发送的数据
          contentType: false, // 告诉jQuery不要去设置Content-Type请求头
          success: function(res) {
            console.log(res);
          },
          error: function(e) {

          }
        });
      },
      send: (config) => {
          let obj;
          if (config.data instanceof FormData) {
              obj = config.data;
          } else {
              obj = config.data ? JSON.stringify(config.data) : {};
          }

          let method = config.method || 'get';
          let url = config.url;

          let params = {}, data;
          if (method === 'get') {
              params = obj;
          } else {
              data = obj;
          }

          let response = axios({
              url: ajaxConfig.host + url,
              method: method,
              headers: { "Authorization": ajaxConfig.authorization },
              params: params,
              data: data
          });
          return response;
      }, 
      send2: function () {
        var form = document.getElementById("form1");
        var formData = new FormData(form);        
        myAction.send({
            url: "/api/v2/tasks/upload_file",
            method: 'POST',   
            data: formData            
        }).then(function(res) {
          console.log(res);
        });         
      }      
    })

    var init = function() {
      myAction.initEvent()
    }()
  })
  </script>
</body>

</html>
猜你喜欢
