分类前端技术下的文章

2024-08-07

在uni-app开发中，处理上传图片及小程序隐私合规通常涉及到以下几个方面：

选择图片：使用uni的API uni.chooseImage 来选择要上传的图片。
预览图片：使用 uni.previewImage 让用户预览选中的图片。
上传图片：使用 uni.uploadFile 将图片上传到服务器。
隐私合规：确保遵守小程序平台的隐私政策，比如不上传用户敏感信息，使用场景明确，上传图片时用户知情。

以下是一个简单的示例代码：




// 选择图片
function chooseImage() {
  uni.chooseImage({
    count: 1, // 默认9, 设置图片的选择数量
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      // 成功选择图片后的回调
      const tempFilePaths = res.tempFilePaths;
      uploadImage(tempFilePaths); // 调用上传图片的函数
    }
  });
}
 
// 上传图片
function uploadImage(filePath) {
  uni.uploadFile({
    url: 'https://your-api-server.com/upload', // 开发者服务器的URL
    filePath: filePath,
    name: 'file', // 必填，文件对应的 key
    formData: {
      'user': 'test' // 其他POST请求中的额外参数
    },
    success: function (uploadFileRes) {
      console.log(uploadFileRes.data); // 输出服务器回传的数据
    }
  });
}
 
// 在适当的地方调用 chooseImage 函数，比如在按钮点击事件中
chooseImage();

确保在实际应用中，你的上传服务器URL是正确的，并且处理好用户授权问题，以及在小程序平台上进行相应的隐私声明和用户协议。

对于隐私合规，你可能需要在上传之前对图片进行处理，比如裁剪或压缩，以确保用户的隐私不会受到侵犯。同时，在上传前告知用户，你将会上传图片，并获取用户的授权。

- 阅读更多 -

基于python网易新闻scrapy爬虫数据分析与可视化大屏展示

System

2024-08-07

所有,css3

:root 选择器可以用来选中文档的根元素，在HTML中，这个根元素始终是<html>。通过:root，我们可以定义自定义属性（也被称为 CSS 变量），然后通过 var() 函数来使用它们。这样可以实现一个动态的变量，因为你可以在运行时更改这些变量的值。

下面是一个简单的例子，演示如何使用 :root 选择器和 var() 函数来定义和使用动态变量：




:root {
  --main-bg-color: coral; /* 定义一个名为 'main-bg-color' 的变量 */
}
 
body {
  background-color: var(--main-bg-color); /* 使用变量 */
}
 
/* 在JavaScript中，我们可以这样改变变量的值 */
document.addEventListener('DOMContentLoaded', function() {
  document.documentElement.style.setProperty('--main-bg-color', 'blue');
});

在上面的代码中，当页面加载完成后，我们通过 JavaScript 监听 DOMContentLoaded 事件，然后通过 setProperty 方法更改了 --main-bg-color 变量的值。这将导致页面的背景色从初始定义的 coral 变为 blue。

- 阅读更多 -

jquery上传图片

System

2024-08-07

所有,ajax

使用jQuery上传图片，你可以通过$.ajax方法发送文件。以下是一个简单的例子：

HTML部分：




<form id="uploadForm">
    <input type="file" name="image" />
    <input type="button" value="上传" id="uploadBtn" />
</form>
<div id="status"></div>

jQuery和JavaScript部分：




$(document).ready(function(){
    $('#uploadBtn').click(function(){
        var formData = new FormData($('#uploadForm')[0]);
 
        $.ajax({
            url: 'your-server-upload-script.php', // 替换为你的上传处理脚本
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response){
                $('#status').html('<p>上传成功</p>');
            },
            error: function(){
                $('#status').html('<p>上传失败</p>');
            }
        });
    });
});

在服务器端，你需要一个能处理上传文件的脚本。以下是一个PHP示例：




<?php
if ($_FILES['image']['error'] === UPLOAD_ERR_OK) {
    $tmpName = $_FILES['image']['tmp_name'];
    $name = $_FILES['image']['name'];
    move_uploaded_file($tmpName, "/path/to/your/uploads/$name");
    echo "文件上传成功";
} else {
    echo "文件上传失败";
}
?>

确保替换your-server-upload-script.php为你的实际上传处理脚本路径，并且修改/path/to/your/uploads/为你的服务器上的实际上传文件夹路径。

- 阅读更多 -

HTML【重点标签】

System

2024-08-07

所有,html

在HTML中，有许多重要的标签，这些标签定义了网页的不同部分，例如标题，段落，链接，列表，图片，表格等等。以下是一些最常见和重要的HTML标签：

<html>：这是一个根元素，所有的HTML文档都在这个元素内部构建。
<head>：这个元素包含了所有的头部标签元素，如<title>, <meta>, 和 <base>。
<title>：定义了浏览器工具栏的标题。
<body>：这是网页的主体部分，所有的可见内容都放在这里。
<h1>到<h6>：定义了从大到小的标题。
<p>：创建一个段落。
<a>：创建一个超链接。
<img>：插入一张图片。
<ul>和<li>：创建无序列表。
<ol>和<li>：创建有序列表。
<table>：创建一个表格。
<tr>：定义表格中的一行。
<td>和<th>：定义表格中的一个单元。

例子代码：




<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My First HTML Page</h1>
    <p>This is a paragraph.</p>
    <a href="https://www.example.com">Visit Example.com</a>
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <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>
    <img src="image.jpg" alt="Image Description">
</body>
</html>

这个HTML页面包含了一个标题，一个段落，一个链接，一个无序列表，一个有序表格，一张图片。这些是构建一个基本网页所需要的基本元素。

- 阅读更多 -

聊聊 CSS 的 ::marker

System

2024-08-07

所有,css

::marker 是一个伪元素，用于选择列表项（如 <ul> 或 <ol> 中的 <li> 元素）的标记。在大多数浏览器中，标记通常是项目符号（例如圆点或数字），但在一些CSS定义的列表中，标记可能是空的或由其他内容组成。

::marker 伪元素可以用来为这些标记添加样式，而不改变列表中项目的内容。

例如，如果你想要更改无序列表的项目符号样式，可以使用以下CSS代码：




ul li::marker {
  color: blue;
  font-size: 20px;
}

如果你想要更改有序列表的项目编号样式，可以使用以下CSS代码：




ol li::marker {
  color: red;
  font-weight: bold;
}

请注意，::marker 目前的支持情况相对较新，因此请在使用时确保浏览器兼容性。

System

2024-08-07

所有,npm

以下是一个简化的流程，用于将Vue 3组件库从零开始构建，并上传到私有NPM仓库：

初始化项目：




npm init @vitejs/app my-component-library
cd my-component-library

安装依赖并选择Vue 3：




npm install

开发组件，在src目录下创建组件。
配置vite.config.js以支持组件库开发。
使用Vite开发服务器进行开发：




npm run dev

构建组件库：




npm run build

创建NPM账号并登录，注册并准备私有NPM仓库。
配置.npmrc以指向私有NPM仓库。
发布到私有NPM仓库：




npm publish

在其他项目中安装并使用该组件库：




npm install my-component-library

以上步骤提供了一个概览，实际操作中会涉及更多细节，如组件的设计、测试、版本控制等。

- 阅读更多 -

HTML与JavaScript联动

System

2024-08-07

所有,javascript

在HTML和JavaScript联动时，通常是通过事件监听器来实现的。以下是一个简单的例子，演示了如何在HTML按钮点击时，通过JavaScript更改页面上的文本内容。

HTML代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML与JavaScript联动示例</title>
</head>
<body>
    <p id="displayText">等待点击按钮...</p>
    <button id="myButton">点击我</button>
    <script src="script.js"></script>
</body>
</html>

JavaScript代码 (script.js)：




document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById('displayText').innerText = '按钮被点击了！';
});

在这个例子中，我们有一个段落(<p>)元素和一个按钮(<button>)元素。段落元素的id是"displayText"，按钮元素的id是"myButton"。当按钮被点击时，我们通过addEventListener为按钮的'click'事件添加一个事件监听器。当按钮被点击时，事件监听器函数会被调用，该函数更改段落的innerText，显示"按钮被点击了！"。

- 阅读更多 -

使用ffmpeg.js在Web上实现流媒体处理

System

2024-08-07

所有,javascript




// 引入ffmpeg.js库
ffmpeg.load().then(async () => {
  // 获取用户选择的视频文件
  const file = document.getElementById('input').files[0];
  const videoElement = document.getElementById('video');
 
  // 创建FileReader实例
  const reader = new FileReader();
  reader.onload = (e) => {
    // 当文件读取完成后，将视频源设置给video元素
    videoElement.src = e.target.result;
  };
 
  // 读取视频文件
  reader.readAsDataURL(file);
 
  // 等待视频加载完成
  await new Promise((resolve, reject) => {
    videoElement.onloadeddata = resolve;
    videoElement.onerror = reject;
  });
 
  // 执行视频滤镜操作
  const buffer = await ffmpeg.write('mpegts', {
    // 设置输出格式为mpegts
    muxer: 'mpegts',
  });
 
  // 将处理后的视频流发送到服务器或进行其他操作
  // 例如，可以将buffer发送到服务器进行进一步处理
  // 这里仅为示例，通常需要使用fetch或XMLHttpRequest来发送数据
  console.log('视频处理完成，输出的buffer为：', buffer);
});

这段代码展示了如何在Web应用中使用ffmpeg.js来处理用户上传的视频文件。首先，它引入并初始化ffmpeg.js库，然后获取用户选择的文件并将其读取为DataURL。接下来，使用ffmpeg.js的write方法将视频流转换为mpegts格式的数据，最后打印出转换后的数据。在实际应用中，可以将转换后的数据发送到服务器进行进一步处理或者创建下载链接供用户下载处理后的视频。

- 阅读更多 -

【JS】实现 Base64 编码和解码（及中文乱码问题）

System

2024-08-07

所有,javascript




// 编码函数
function encode64(str) {
    var buffer = new Buffer(str.toString(), 'utf-8');
    return buffer.toString('base64');
}
 
// 解码函数
function decode64(str) {
    var buffer = new Buffer(str, 'base64');
    return buffer.toString('utf-8');
}
 
// 测试代码
var str = 'Hello, World!';
var encodedStr = encode64(str);
var decodedStr = decode64(encodedStr);
 
console.log('原始字符串:', str);
console.log('编码后:', encodedStr);
console.log('解码后:', decodedStr);

注意：以上代码示例使用了Node.js的Buffer类来实现Base64编码和解码，并且在编码和解码时指定了UTF-8字符编码来确保中文字符正确处理。在浏览器环境中，可以使用btoa()和atob()函数来实现相同的功能。

- 阅读更多 -

ElementUI描述列表Descriptions设置自定义样式/修改固定宽度

System

2024-08-07

所有,elementui

在ElementUI中，Descriptions组件默认不支持直接设置固定宽度。但是，您可以通过内联样式或者CSS类来实现这一需求。

以下是一个示例，展示如何给Descriptions组件设置固定宽度：




<template>
  <el-descriptions
    class="my-descriptions"
    :border="true"
    :column="2"
    title="自定义宽度的描述列表"
  >
    <!-- 省略内容 -->
  </el-descriptions>
</template>
 
<script>
export default {
  // 省略数据和方法
};
</script>
 
<style>
.my-descriptions {
  width: 500px; /* 设置固定宽度 */
}
</style>

在上面的代码中，.my-descriptions 是一个自定义的CSS类，用于设置Descriptions组件的宽度为500px。您可以根据实际需求调整width属性的值。

- 阅读更多 -