b.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>测试</title>
  7. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  8. </head>
  9. <body>
  10. <form id="uploadForm" enctype="multipart/form-data">
  11. <input type="file" id="fileInput" name="video" accept="image/jpeg, image/png, image/jpg, image/gif" multiple> <!-- 允许选择多个文件 -->
  12. <button type="submit">上传图片</button>
  13. </form>
  14. <script>
  15. $(document).ready(function () {
  16. function imageToBase64(url, callback) {
  17. fetch(url)
  18. .then(response => response.blob()) // 获取图片的二进制数据
  19. .then(blob => {
  20. const reader = new FileReader();
  21. reader.onloadend = function () {
  22. callback(reader.result); // 获取 Base64 编码
  23. };
  24. reader.readAsDataURL(blob); // 转换为 Base64
  25. })
  26. .catch(error => {
  27. console.error('图片转换失败:', error);
  28. });
  29. }
  30. // 使用示例
  31. imageToBase64('http://l.cn:23314/storage/images/2fe4aab00cf6b0e88ff8ca0c8763eab2.png', (base64) => {
  32. console.log('Base64 编码:', base64);
  33. });
  34. $('#uploadForm').on('submit', function (e) {
  35. e.preventDefault();
  36. var formData = new FormData();
  37. var fileInput = $('#fileInput')[0].files[0]; // 获取文件
  38. formData.append('image', fileInput); // 将文件添加到FormData对象中
  39. $.ajax({
  40. // url: 'https://marry-api.xt528.com/api/user/uploadFile',
  41. url: 'http://127.0.0.1:23314/api/user/uploadFile',
  42. type: 'POST',
  43. data: formData,
  44. contentType: false, // 不设置 contentType, jQuery 会自动处理
  45. processData: false, // 不对数据进行处理
  46. headers: {
  47. Authorization: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MzcwMDE2NTIsImV4cCI6MTczNzAwNTI1Miwic3ViIjoxLCJ1c2VyX2lkIjoxfQ.SRWTBsoFPuAM2B65cSVUeSfyb45siSoAwdK7_x2sknE' //token为登录接口获取到的token
  48. },
  49. success: function (response) {
  50. console.log('上传成功:', response);
  51. },
  52. error: function (xhr, status, error) {
  53. console.log('上传失败:', error);
  54. }
  55. });
  56. return false;
  57. });
  58. });
  59. </script>
  60. </body>
  61. </html>