微语：代码适合中午敲，早晚出BUG

相册图库图片相册介绍
站长工具各种快捷工具
我的邻居我的小伙伴们
热门文章关注点最多文章
账号注册注册本站账号
技术支持大佬指导员

Avue+vue2实现大型文件切片上传 Vue

1.Avue配置项avue-crud中需要添加文件上传前函数

<avue-crud
:upload-before="uploadBefore"
>
</avue-crud>

2.工具函数代码

// 引入axios进行http请求
import axios from "axios";
// 异步函数Fileslicing，用于处理文件的分片上传
async function Fileslicing(vueInstance, file, done, loading, column) {
  let _this = vueInstance; // 将vue实例保存在_this中，用于后续引用
  const CHUNK_SIZE = 1 * 1024 * 1024; // 定义每个分片的大小为1MB
  // const CHUNK_SIZE = 512 * 1024; // 或定义分片大小为500KB
  const totalChunks = Math.ceil(file.size / CHUNK_SIZE); // 计算总的分片数量
  let uploadedChunks = 0; // 已上传分片的计数器
  const overallStartTime = performance.now(); // 记录开始上传的时间

  // 循环处理每个分片
  for (let index = 0; index < totalChunks; index++) {
    const start = index * CHUNK_SIZE; // 计算当前分片的起始位置
    const end = Math.min(start + CHUNK_SIZE, file.size); // 计算结束位置，确保不超出文件大小
    const blob = file.slice(start, end); // 从文件中切割出当前分片
    // 创建一个新的文件对象用于上传，包含当前分片内容
    const chunkFile = new File([blob], `${file.name}-${index}`, {
      type: file.type,
    });
    const formData = new FormData(); // 使用FormData上传分片
    formData.append("file", chunkFile); // 添加当前分片
    formData.append("chunkNumber", index); // 当前分片的序号
    formData.append("totalChunks", totalChunks); // 总分片数
    formData.append("fileName", file.name); // 原文件名

    try {
      // 发起分片上传请求
      const response = await axios.post(
        "/api/blade-resource/oss/endpoint/chunk",
        formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      );
      uploadedChunks++; // 上传成功后，已上传分片数+1
      // 计算并显示上传进度
      const progressPercentage = ((uploadedChunks / totalChunks) * 100).toFixed(2);
      // 显示上传进度的通知
      vueInstance.$notify.info({
        title: "进度",
        message: `当前上传进度: ${progressPercentage}%`,
      });
      if(progressPercentage == 100){
          // 如果上传进度达到100%，显示文件上传完成的通知
          vueInstance.$notify({
            type: 'success',
            title: "通知",
            message: `文件已上传完成！正在处理中请稍等......`,
          });
      }

      // 如果当前分片是最后一个分片
      if (index === totalChunks - 1) {
        // 发起合并文件的请求
        const fileData = {
          fileName: file.name,
          totalChunks: totalChunks,
        };
        const Stresponse = await axios.post(
          "/api/blade-resource/oss/endpoint/mergeFile",
          fileData,
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        );

        if (Stresponse.data.code === 200) {
          // 如果文件合并成功
          const overallEndTime = performance.now(); // 记录操作结束时间
          // 计算总耗时
          const totalFunctionTime = (overallEndTime - overallStartTime) / 1000;
          column.tip = ``; // 可根据需要进行操作
          let url = (Stresponse.data.data.domain + '/' + Stresponse.data.data.name);
          _this.form.videoUrl = url; // 更新vue实例中的视频URL
          loading(); // 可能是结束加载状态的函数
          // 显示上传成功的消息
          vueInstance.$message.success(
            `上传成功:文件名:${file.name},文件大小${(file.size / (1024 * 1024)).toFixed(2)} MB, 上传进度: ${progressPercentage}%,总耗时:${totalFunctionTime.toFixed(2)}秒`
          );
        } else {
          // 如果文件合并失败
          loading();
          vueInstance.$message.error("文件合并失败");
        }
      }
    } catch (error) {
      // 如果上传过程中出现错误
      vueInstance.$message.error("上传出错");
      loading(); // 结束加载状态
      return; // 停止执行
    }
  }
}

// 导出Fileslicing函数，使其在Vue实例中可用
export default {
    install(Vue) {
      Vue.prototype.$fileslicing = Fileslicing;
    },
};

3.注册全局，在main.js中引入

import FileslicingPlugin from '../src/util/Fileslicing';
Vue.use(FileslicingPlugin);

4.页面使用

    Avue文件上传前函数
     uploadBefore(file, done, loading, column) {
      this.$fileslicing(this,file,done,loading,column);//文件切换全局函数(初始)
      },

小诸葛 Avue+vue2实现大型文件切片上传文件切片上传 vue切片上传 3-14

评论(0) 浏览(87)

vite.config.js配置如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
  plugins: [ 
    vue(), // 添加 Vue 插件配置
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
    server: {
      port: 2888,
      proxy: {
        '/api': {
          target: 'http://192.168.3.14:13000',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },

})

axios封装

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  timeout: 10000, // 设置超时时间为10秒
  headers: {
    'Content-Type': 'application/json', // 设置Content-Type
  },
  // 删除baseURL配置
});

// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求发送之前做些什么
    // 如果需要在请求发送前进行额外的处理，可以在这里添加
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做处理
    return response.data;
  },
  error => {
    // 对响应错误做处理
    return Promise.reject(error);
  }
);

export default instance;

API引用

import request from '@/axios';
export const $_deliveryInfo = (params) => {
    return request({
      url: '/api/logpm-distribution/a/abc', // 注意这里的 URL带上API 更改
      method: 'get',
      params
    })
}

启动项目如果只有本地地址需要再package.json中配置

  "scripts": {
    "dev": "vite --host",
  },

小诸葛 Vue配置API代理 3-7

评论(0) 浏览(117)

1. 微信小程序介绍

只能通过微信APP, 扫码/点击链接, 进入的特殊"网页"的集合.
无需下载安装包(扫码直用)

2. 移动端应用分类

H5APP: 使用传统WEB技术(H5+CSS3+JS), 在浏览器中运行的网页
小程序: 使用自家开发技术栈研发的小应用, 只能在特定APP中扫码/点击打开(微信小程序, 支付宝小程序)
原生APP: 需要下载安装包, 安装才能使用, 区分IOS/ANDROID ! 安装包不互通

3. 小程序的开发流程

3.1 注册小程序开发者账号
https://mp.weixin.qq.com/
3.2 下载小程序专用开发IDE-微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.3 通过微信开发者工具, 新建项目
每次创建项目需要填写自己的小程序AppID

4. 小程序的核心目录

(重要)pages -- 小程序所有核心页面
utils -- 工具文件夹
.eslintrc.js -- eslint语法检测配置文件
app.js -- 入口js文件
app.json -- 全局配置
app.wxss -- 全局样式
project.config.json -- 工程配置1
project.private.config.json -- 工程配置2
sitemap.json -- 其他描述

5. 小程序的页面结构

小程序并非HTML, 所以有一套自己的开发模式和文件类型
.js -- 页面的逻辑
.json -- 页面的配置
.wxml -- 页面的结构
.wxss -- 页面的样式

6. 小程序独有常用标签

navigator: 超链接, 允许跳转到小程序的任意页面
view: 容器!! ===div
text: 文本 ===span
swiper: 轮播组件
swiper-item: 轮播的儿子
例:

<swiper>
   <swiper-item>元素1</swiper-item>
   <swiper-item>元素2</swiper-item>
..
</swiper>

button: 按钮
input: 输入框
image: 图片
icon: 系统送的图标
scroll-view: 可以滚动的view容器
map: 地图

7. 小程序的事件

小程序只有两种事件: 冒泡(bind), 非冒泡(catch)

事件类型:

tap: 触摸
longpress: 长按(0.35s)
touchstart: 触摸开始
touchend: 触摸结束
touchmove: 触摸后开始移动
touchcancel: 触摸后被系统弹窗/电话等打断

绑定方式: bindtap冒泡触摸 catchtap非冒泡触摸

8. 小程序的数据驱动

8.1 把要变化的数据放入data中

data: {
name: 'zhangsan'
}

8.2 使用mustauche获取动态数据, 小程序不区分内容还是属性, 都是用{{}}获取

<view name="{{ test }}">测试{{ aa }}</view>

8.3 修改数据

this.setData({
//key要修改的key名: value新的值
name: 'lisi'
})

9. 小程序其他

底部 tabBar
自定义头部导航 navigationStyle
获取胶囊坐标 wx.getMenuButtonBoundingClientRect()

小诸葛小程序入门教程 9-24

评论(0) 浏览(396)

修改C盘下的User中文名文件夹 Windows教程

1.首先按Win+R快捷键,调出运行窗口,输入regedit回车打开注册表

2.依次展开注册表:\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList

展开ProfileList后双击打开最后一项,在右边的列表中找到ProfileImagePath选项

双击或者右击修改ProfileImagePath,将里面的中文名修改成英文,然后重启电脑

3.重启电脑后,我们打开C盘找到用户当中与我们修改之前的中文名一致的文件夹修改成我们修改后的英文名,然后重启电脑

注：亲测有效！！！

小诸葛修改C盘下的User中文名文件夹 9-24

评论(0) 浏览(286)

React打包白屏如何解决 React

在打包React项目的时候出现白屏了，需要在package.json中添加一行配置

"homepage":"."

homepage作用

打包时候, 自动在资源目录, 也就是引入的js和css目录前面添加设置的字符串,设置为 "."会自动在前面添加一个., 这样绝对路径就变为相对路径了.

小诸葛 React打包白屏如何解决 9-24

评论(0) 浏览(350)

1 2 3 4 5 6 7 ... 23 »

友情链接申请

会飞的鱼 lerte程序员六思逸微4e 迎風别葉峡州仙士之页郑羊羊咩的窝微资源论坛 91影视网拾光博客

I am 小诸葛

是一名前端工程师，独立开发者、博主

11 2023-09-02 14:11
11年后
rantrism 2023-04-10 10:44
您好～我是腾讯云开发者社区运营，关注了您...
小诸葛 2023-03-06 15:07
来自【Hello word】
snow 2023-03-02 14:05
stay hungry stay foo...