123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>测试</title>
- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
- </head>
- <body>
- <form id="uploadForm" enctype="multipart/form-data">
- <input type="file" id="fileInput" name="video" accept="image/jpeg, image/png, image/jpg, image/gif" multiple> <!-- 允许选择多个文件 -->
- <button type="submit">上传图片</button>
- </form>
- <script>
- $(document).ready(function () {
- function imageToBase64(url, callback) {
- fetch(url)
- .then(response => response.blob()) // 获取图片的二进制数据
- .then(blob => {
- const reader = new FileReader();
- reader.onloadend = function () {
- callback(reader.result); // 获取 Base64 编码
- };
- reader.readAsDataURL(blob); // 转换为 Base64
- })
- .catch(error => {
- console.error('图片转换失败:', error);
- });
- }
- // 使用示例
- imageToBase64('http://l.cn:23314/storage/images/2fe4aab00cf6b0e88ff8ca0c8763eab2.png', (base64) => {
- console.log('Base64 编码:', base64);
- });
- $('#uploadForm').on('submit', function (e) {
- e.preventDefault();
- var formData = new FormData();
- var fileInput = $('#fileInput')[0].files[0]; // 获取文件
- formData.append('image', fileInput); // 将文件添加到FormData对象中
- $.ajax({
- // url: 'https://marry-api.xt528.com/api/user/uploadFile',
- url: 'http://127.0.0.1:23314/api/user/uploadFile',
- type: 'POST',
- data: formData,
- contentType: false, // 不设置 contentType, jQuery 会自动处理
- processData: false, // 不对数据进行处理
- headers: {
- Authorization: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MzcwMDE2NTIsImV4cCI6MTczNzAwNTI1Miwic3ViIjoxLCJ1c2VyX2lkIjoxfQ.SRWTBsoFPuAM2B65cSVUeSfyb45siSoAwdK7_x2sknE' //token为登录接口获取到的token
- },
- success: function (response) {
- console.log('上传成功:', response);
- },
- error: function (xhr, status, error) {
- console.log('上传失败:', error);
- }
- });
- return false;
- });
- });
- </script>
- </body>
- </html>
|