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

黄良钵

分类: 程序开发 100 0

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

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

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

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://huangliangbo.com" name="api" id="api">
  26.         <br>
  27.         <br>
  28.         <p>form表单提交:</p>
  29.         <input type="file" name="file" id="img">
  30.         <br>
  31.         <br>
  32.         <p>base64:</p>
  33.         <input type="file" name="base64" id="base64">
  34.         <p>输出:</p>
  35.         <div id="res"></div>
  36.     </section>
  37.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  38.     <script>
  39.     $('#img').change(function(e) {
  40.         let file = e.target.files[0];
  41.         let param = new FormData(); //创建form对象
  42.         param.append('file', file, file.name); //通过append向form对象添加数据
  43.         // console.log(file)
  44.         $.ajax({
  45.                 url: $('#api').val(),
  46.                 type: 'POST',
  47.                 data: param,
  48.                 contentType: false,
  49.                 processData: false,
  50.             })
  51.             .done(function(res) {
  52.                 console.log("form-----success");
  53.                 console.log('form:', res)
  54.                 $('#res').text(JSON.stringify(res))
  55.             })
  56.             .fail(function() {
  57.                 console.log("form----error");
  58.             })
  59.             .always(function() {
  60.                 console.log("form----complete");
  61.             });
  62.  
  63.     });
  64.  
  65.     $('#base64').change(function(e) {
  66.         let file = e.target.files[0]; // 获取图片信息 可以从中获取图片大小
  67.         let reader = new FileReader();
  68.         reader.readAsDataURL(file); // 读出 base64
  69.         reader.onloadend = function() {
  70.             // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
  71.             let dataURL = reader.result; // dataURL 为图片 base64 码
  72.             // 下面逻辑处理
  73.             $.ajax({
  74.                     url: $('#api').val(),
  75.                     type: 'POST',
  76.                     data: {
  77.                         img: dataURL // img 为后端接收参数
  78.                     },
  79.                 })
  80.                 .done(function(res) {
  81.                     console.log("base64 -- success");
  82.                     console.log('base64:', res)
  83.                     $('#res').text(JSON.stringify(res))
  84.                 })
  85.                 .fail(function() {
  86.                     console.log("base64---error");
  87.                 })
  88.                 .always(function() {
  89.                     console.log("base64----complete");
  90.                 });
  91.         };
  92.     });
  93.     </script>
  94. </body>
  95.  
  96. </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/

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
Ajax、form上传图片、图片base64、图片上传

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “ajax上传图片 form和base64上传 后端上传图片接口测试”

Loading...