Ant Design Upload 自定义上传 customRequest
System
2024-08-23
所有,typescript

在Ant Design中，你可以使用customRequest属性来自定义文件上传的行为。这个属性接受一个函数，该函数会接收一个包含action、directory、data和filename的对象，以及一个onSuccess和onError的回调函数。

以下是一个使用customRequest的例子：




import React from 'react';
import { Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
 
function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  return isJpgOrPng || Upload.LIST_IGNORE;
}
 
function customRequest(options) {
  const { onSuccess, onError, file, onProgress } = options;
 
  const formData = new FormData();
  formData.append('file', file);
 
  // 使用你喜欢的方式上传文件，例如使用axios
  fetch('your-upload-api', {
    method: 'POST',
    body: formData,
    onUploadProgress: ({ total, loaded }) => {
      onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) });
    },
  })
    .then(() => {
      onSuccess('upload success');
    })
    .catch(() => {
      onError('upload failed');
    });
}
 
function App() {
  return (
    <Upload
      customRequest={customRequest}
      beforeUpload={beforeUpload}
      name="file"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    >
      <button style={{ border: '1px solid #d9d9d9', padding: 10 }}>
        <UploadOutlined /> Upload
      </button>
    </Upload>
  );
}
 
export default App;

在这个例子中，我们定义了一个customRequest函数，它会创建一个FormData对象，将文件附加到该对象，然后使用fetch API发送请求。你可以根据需要替换上传逻辑，例如使用axios或其他HTTP客户端。beforeUpload函数用于检查文件类型。

请注意，你需要根据你的API端点更新action属性。在这个例子中，我使用了一个模拟的API端点https://www.mocky.io/v2/5cc8019d300000980a055e76，你应该替换为你自己的上传API。

- 阅读更多 -
Table布局 flex布局 grid布局
System
2024-08-23
所有,css3

在CSS中，有三种主要的布局方式：Table布局、Flex布局和Grid布局。

  1. Table布局：

Table布局是通过创建一个表格来控制网页布局。表格的每一部分都可以通过行（<tr>）和列（<td>）进行控制。

HTML:




<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>
  1. Flex布局：

Flex布局是一种更加灵活的布局方式，它可以使容器的子项在任何方向上排列，并且可以弹性地伸缩以填充可用空间。

HTML:




<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS:




.flex-container {
  display: flex;
}
  1. Grid布局：

Grid布局是一种基于网格的布局系统，它将容器分割成一系列的行和列，然后通过行和列的交叉定位子项。

HTML:




<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS:




.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

每种布局都有其优点和适用场景，例如，Flex布局在移动应用和响应式网页设计中非常流行，而Grid布局在创建复杂的网格布局时提供了更多的灵活性。

- 阅读更多 -
HTML5超炫酷特效【天空中白云飘动CSS3特效】HTML+CSS+JavaScript
System
2024-08-23
所有,css3

以下是实现天空中白云飘动CSS3特效的完整示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Cloud Animation</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .clouds-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c9d7f1;
    z-index: 1;
  }
  .clouds-fg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAyCAYAAACoPV+aAAAgAElEQVR4Xu3UQQ2AMAhD7+v58I3f0H9/3+D19/v39/f39/vH9/f3+Dg4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBg
- 阅读更多 -
Vue2 CSS小知识点
System
2024-08-23
所有,css

在Vue2中，CSS的使用可以通过以下几种方式进行：

  1. 单文件组件中的<style>标签：可以在Vue组件的单文件中使用<style>标签来添加CSS。



<template>
  <div class="example">Hello, World!</div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style scoped>
.example {
  color: red;
}
</style>
  1. 全局CSS文件：可以在入口文件（如main.js或app.js）中导入全局CSS文件。



// main.js
import Vue from 'vue';
import App from './App.vue';
import './global.css'; // 全局CSS文件
 
new Vue({
  render: h => h(App),
}).$mount('#app');
  1. CSS预处理器：如Sass/SCSS、Less等，需要相关预处理器支持。



<template>
  <div class="example">Hello, World!</div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style lang="scss">
$color: red;
 
.example {
  color: $color;
}
</style>
  1. CSS Modules：在单文件组件中使用CSS Modules，可以使样式局部作用于组件。



<template>
  <div :class="style.example">Hello, World!</div>
</template>
 
<script>
import style from './style.module.css';
 
export default {
  data() {
    return {
      style,
    };
  },
};
</script>
  1. 使用CSS-in-JS库，如styled-components。



import styled from 'styled-components';
 
const StyledDiv = styled.div`
  color: red;
`;
 
export default {
  render() {
    return <StyledDiv>Hello, World!</StyledDiv>;
  },
};

以上是在Vue2中使用CSS的一些方法，具体使用哪种取决于项目需求和开发者偏好。

- 阅读更多 -
CSS基础：width，height尺寸属性详解
System
2024-08-23
所有,css

在CSS中，width和height属性用于设置元素的宽度和高度。这两个属性可以为元素内容设置固定的尺寸，也可以使用百分比、vh单位（视口高度的百分比）等相对单位来设置。

  • width属性用于设置元素的宽度。
  • height属性用于设置元素的高度。

CSS代码示例：




/* 设置元素宽度为200像素 */
div {
  width: 200px;
}
 
/* 设置元素高度为150像素 */
div {
  height: 150px;
}
 
/* 设置元素宽度为父元素的50% */
div {
  width: 50%;
}
 
/* 设置元素高度为视口高度的25% */
div {
  height: 25vh;
}

在实际应用中，width和height通常与其他属性（如box-sizing）一起使用，以确保元素的实际尺寸按预期计算。box-sizing属性默认值为content-box，这意味着元素的实际尺寸只包括内容区域，而设置为border-box时，边框和内边距被包含在元素的宽度和高度内。

- 阅读更多 -
多个 ajax 请求顺序一次执行
System
2024-08-23
所有,ajax

要顺序执行多个AJAX请求，可以使用Promise对象和then链。以下是一个使用jQuery的例子：




function makeRequest(url) {
  return $.ajax({
    url: url,
    type: 'GET'
  });
}
 
// 创建请求数组
var requests = [
  makeRequest('url1.php'),
  makeRequest('url2.php'),
  makeRequest('url3.php')
];
 
// 使用Promise.then链顺序执行请求
requests[0]
  .then(function(response) {
    console.log('请求1成功:', response);
    return requests[1];
  })
  .then(function(response) {
    console.log('请求2成功:', response);
    return requests[2];
  })
  .then(function(response) {
    console.log('请求3成功:', response);
  })
  .catch(function(error) {
    console.error('请求出错:', error);
  });

在这个例子中，makeRequest函数创建了一个新的AJAX请求，返回一个Promise对象。然后我们创建了一个请求数组，并使用第一个请求的then方法开始链式调用，每个then块都会在前一个请求成功完成后发起下一个请求。如果任何请求失败，catch块将被触发。

- 阅读更多 -
【精讲】vue框架 axios请求（内含模拟数据交互部分）入门
System
2024-08-23
所有,ajax



<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error('There was an error fetching the users: ', error);
        });
    }
  }
};
</script>

这段代码展示了如何在Vue组件中使用axios来发送HTTP GET请求，获取用户数据，并将其渲染到列表中。同时，它还展示了如何在Vue生命周期的created钩子中调用该方法，以在组件创建时获取数据。

- 阅读更多 -
docker-compose部署emqx集群 配置带mysql授权认证
System
2024-08-23
所有,中间件

要使用docker-compose部署EMQX集群并配置MySQL作为授权认证，你需要创建一个docker-compose.yml文件，并配置EMQX的相关配置。以下是一个基本的例子：




version: '3'
services:
  emqx1:
    image: emqx/emqx:latest
    container_name: emqx1
    ports:
      - "1883:1883"
      - "8083:8083"
      - "8084:8084"
      - "18083:18083"
    environment:
      - EMQX_NODE_NAME=emqx1@emqx-cluster
      - EMQX_CLUSTER__DISCOVERY=emqx-cluster@1
      - EMQX_CLUSTER__STATIC_SEEDS=emqx1@emqx1:4369,emqx2@emqx2:4369
      - EMQX_CLUSTER__LISTEN_ON=0.0.0.0:4369
      - EMQX_CLUSTER__KERNEL=on
      - EMQX_AUTH__USER__SQL_AUTH__SERVER=mysql://username:password@mysql-server:3306/emqx_auth
      - EMQX_AUTH__USER__SQL_AUTH__QUERY=select password from mqtt_user where username = '%u'
    networks:
      - emqx-net
 
  emqx2:
    image: emqx/emqx:latest
    container_name: emqx2
    ports:
      - "1884:1883"
    environment:
      - EMQX_NODE_NAME=emqx2@emqx-cluster
      - EMQX_CLUSTER__DISCOVERY=emqx-cluster@1
      - EMQX_CLUSTER__STATIC_SEEDS=emqx1@emqx1:4369,emqx2@emqx2:4369
      - EMQX_CLUSTER__LISTEN_ON=0.0.0.0:4369
      - EMQX_CLUSTER__KERNEL=on
      - EMQX_AUTH__USER__SQL_AUTH__SERVER=mysql://username:password@mysql-server:3306/emqx_auth
      - EMQX_AUTH__USER__SQL_AUTH__QUERY=select password from mqtt_user where username = '%u'
    networks:
      - emqx-net
 
  mysql-server:
    image: mysql:5.7
    container_name: mysql-server
    environment:
      - MYSQL_ROOT_PASSWORD=root_password
      - MYSQL_DATABASE=emqx_auth
      - MYSQL_USER=username
      - MYSQL_PASSWORD=password
    volumes:
      - ./emqx_auth.sql:/docker-entrypoint-initdb.d/emqx_auth.sql
    networks:
      - emqx-net
 
networks:
  emqx-net:
    driver: bridge

确保你有一个emqx_auth.sql文件，它包含了MySQL数据库的初始化脚本，用于创建mqtt_user表等。

注意事项：

  • 确保将username、password和root_password替换为你的MySQL凭据。
  • 确保你的MySQL用户有权限访问数据库和执行查询。
  • 确保你的EMQX节点名称、发现机制和静态种子配置正确。
  • 确保你的MySQL服务和EMQX实例在同一个网络中，以便它们可以通信。

这个配置是一个基本的例子，根据你的实际需求，你可能需要调整配置，例如端口

- 阅读更多 -
【Express】创建输出日志中间件（log4js）
System
2024-08-23
所有,中间件



const express = require('express');
const log4js = require('log4js');
 
// 配置log4js
log4js.configure({
  appenders: {
    console: { type: 'console' },
    access: { type: 'file', filename: 'logs/access.log' },
    application: { type: 'file', filename: 'logs/app.log' }
  },
  categories: {
    default: { appenders: ['console', 'application'], level: 'info' },
    http: { appenders: ['console', 'access'], level: 'info' }
  }
});
 
const app = express();
const logger = log4js.getLogger('http');
 
// 输出日志的中间件
app.use((req, res, next) => {
  logger.info(`${req.method} ${req.path}`);
  next();
});
 
app.get('/', (req, res) => {
  res.send('Hello, World!');
});
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

这段代码使用了log4js库来配置日志系统，并创建了一个Express应用程序，其中包含了一个输出日志的中间件。当访问服务器根路径时，将会记录一条日志信息。

- 阅读更多 -
Celery的安装和简单使用（Redis作为消息中间件）
System
2024-08-23
所有,中间件



# 安装celery和redis依赖
# pip install celery redis
 
from celery import Celery
 
# 创建Celery实例，指定消息中间件为Redis
app = Celery('tasks', broker='redis://localhost:6379/0')
 
# 定义一个celery任务
@app.task
def add(x, y):
    return x + y
 
# 使用Celery任务
# 在命令行启动celery worker:
# celery -A tasks worker --loglevel=info
 
# 在Python代码中调用异步任务
result = add.delay(4, 4)
print(f"等待结果: {result.id}")

这段代码演示了如何安装和设置Celery以及如何定义和调用一个简单的异步任务。在实际应用中，你需要确保Redis服务器正在运行，并且根据你的环境可能需要修改broker的URL。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号