<! DOCTYPEhtml>
<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.eyJpc3MiOiJrZW4iLCJpYXQiOjE1NDYwNzQ3NTYsImRhdGEiOnsidXNlcm5hbWUiOiJ4dXRvbmdiYW8iLCJ pc19zdXBlcnVzZXIiOjEsImlkIjo5LCJsb2dpbl90aW1lIjoxNTQ2MDc0NzU2fSwiZXhwIjoxNTQ2Njc0NzU2fQ.ntmWGZRVIxBpcc0EEZ3rTGyVL8SPmRbI tYr4znShITU'
    }
 
    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.// Tell jQuery not to process the sent data
          contentType: false.// Tell jQuery not to set the Content-Type request header
          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);    
        let selectedFile = document.getElementById("form1") [0].files[0];
        var reader = new FileReader();// This is the core that does the reading.
        reader.readAsText(selectedFile);// Read the contents of the file, or read the URL of the file
        //console.log(reader.result)  
        reader.onload=function(e){  
          console.log(this.result)
        }                
        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>
Copy the code