ajax上传图片 form和base64上传 后端上传图片接口测试

用于后端测试，前端ajax上传图片。

JavaScript通过 new FileReader() 获取图片base64 无组件上传图片
Vue input上传图片
小程序选择、预览、删除、上传图片

Demo:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>图片上传测试</title>
  7.     <style>
  8.     section {
  9.         width: 1000px;
  10.         margin: 50px auto;
  11.         box-shadow: 0 0 5px 5px #eee;
  12.         padding: 20px 20px 40px;
  13.     }
  14.  
  15.     #api {
  16.         width: 300px;
  17.         padding: 10px
  18.     }
  19.     </style>
  20. </head>
  21.  
  22. <body>
  23.     <section>
  24.         <p>输入测试接口:</p>
  25.         <input type="text" placeholder="https://blog.bg7zag.com" name="api" id="api">
  26.         
  1.         
  1.         <p>form表单提交：</p>
  2.         <input type="file" name="file" id="img">
  3.         
  1.         
  1.         <p>base64:</p>
  2.         <input type="file" name="base64" id="base64">
  3.         <p>输出：</p>
  4.         <div id="res"></div>
  5.     </section>
  6.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  7.     <script>
  8.     $('#img').change(function(e) {
  9.         let file = e.target.files[0];
  10.         let param = new FormData(); //创建form对象
  11.         param.append('file', file, file.name); //通过append向form对象添加数据
  12.         // console.log(file)
  13.         $.ajax({
  14.                 url: $('#api').val(),
  15.                 type: 'POST',
  16.                 data: param,
  17.                 contentType: false,
  18.                 processData: false,
  19.             })
  20.             .done(function(res) {
  21.                 console.log("form-----success");
  22.                 console.log('form:', res)
  23.                 $('#res').text(JSON.stringify(res))
  24.             })
  25.             .fail(function() {
  26.                 console.log("form----error");
  27.             })
  28.             .always(function() {
  29.                 console.log("form----complete");
  30.             });
  31.  
  32.     });
  33.  
  34.     $('#base64').change(function(e) {
  35.         let file = e.target.files[0]; // 获取图片信息 可以从中获取图片大小
  36.         let reader = new FileReader();
  37.         reader.readAsDataURL(file); // 读出 base64
  38.         reader.onloadend = function() {
  39.             // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
  40.             let dataURL = reader.result; // dataURL 为图片 base64 码
  41.             // 下面逻辑处理
  42.             $.ajax({
  43.                     url: $('#api').val(),
  44.                     type: 'POST',
  45.                     data: {
  46.                         img: dataURL // img 为后端接收参数
  47.                     },
  48.                 })
  49.                 .done(function(res) {
  50.                     console.log("base64 -- success");
  51.                     console.log('base64:', res)
  52.                     $('#res').text(JSON.stringify(res))
  53.                 })
  54.                 .fail(function() {
  55.                     console.log("base64---error");
  56.                 })
  57.                 .always(function() {
  58.                     console.log("base64----complete");
  59.                 });
  60.         };
  61.     });
  62.     </script>
  63. </body>
  64.  
  65. </html>

github: https://github.com/hlbj105/upload-image

coding: https://dev.tencent.com/u/hlbj105/p/upload-image/git

Demo: https://hlbj105.github.io/upload-image/

https://hlbj105.coding.me/upload-image/