文件上传总结：用原生解决前端文件上传操作（单个，多个，大文件切片）

目录

第一章 前言

第二章 理解文件上传的对象

2.1 如何利用原生实现

2.2 认识理解文件上传的四个对象

2.2.1 file对象

2.2.2 blob对象

2.2.3  formData对象

2.2.4 fileReader对象 

2.2.4.1 了解fileReader对象基本属性

2.2.4.2 了解 fileReader对象基本方法

2.2.4.3  了解fileReader对象基本事件

第三章 理解四个对象的使用

3.1 file与blob对象的使用

3.1.1 file对象转blob对象

3.1.2 blob对象转file对象

3.2 formData的使用

第四章 实战应用

4.1 单文件上传

4.2 多文件上传

4.3 切片上传

4.3.1 如何处理多个图片

4.3.2 实现切片上传 

第五章 源码

第一章 前言

相信我们很多人在项目中都会实现图片上传这么个功能，并且也会使用FormData和elementUI、antd等框架的upload组件实现，但是一延伸到原理、细节时就很难受，说不出所以然(小编也体验过，哈哈哈哈)，所以如下是小编最近总结的点。

  • 用到的前端页面
    <input type="file" @change="fileChange" multiple /><button @click="submit">多选提交</button><span v-for="(item, index) in fileList" :key="index">{{ item.name }}</span><button @click="dealFile">处理图片信息</button>

第二章 理解文件上传的对象

2.1 如何利用原生实现

  • 利用input原生标签，type为file形式，multiple为多选，accept可以限制上传的文件类型，@change是使用的方法 

<input type="file" @change="fileChange" multiple />

HTML input 标签 | 菜鸟教程

  • 我们可以看到最终返回的数据类型是File对象 

一个或多个文件对象组成的数组

 

2.2 认识理解文件上传的四个对象

2.2.1 file对象

  • 通过指定input标签type属性为file来读取files对象，是一个由一个或多个文件对象组成的数组

2.2.2 blob对象

  • 表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据， 使用构造函数创建。

2.2.3  formData对象

  • 利用它来提交表单、模拟表单提交，最大的优势就是可以上传二进制文件。
  • 熟悉formData：

 前后端传参：掌握FormData并解决form-data类型传参问题_前端formdata传参-CSDN博客

2.2.4 fileReader对象 

  • 构造函数方式实例化一个fileReader对象，readAs()方法将文件对象读取成base64格式或者文本格式
2.2.4.1 了解fileReader对象基本属性
  • 直接使用时：
const reader = new FileReader()
console.log('FileReader方法及属性：', reader)
  • 查看方法及属性：

 

  • FileReader.error（只读属性）：读取文件时报的错误，null表示在读取用户所上传文件时没有出错
  • FileReader.readyState（只读属性）：加载状态
状态值描述
0还没有加载任何数据
1数据正在被加载
2已完成全部的读取请求
  • FileReader.result（只读属性）：表示文件的内容，仅在读取操作完成之后才有效，数据的格式取决于使用哪个方法（在2.2.4.2中）来启动读取操作
const reader = new FileReader()
console.log('FileReader方法及属性：', reader)
console.log('尝试使用只读属性error：', reader.error)
console.log('尝试使用只读属性readyState：', reader.readyState)
console.log('尝试使用只读属性result：', reader.result)

2.2.4.2 了解 fileReader对象基本方法
  •  我们顺着原型链往下找可以发现，该对象下还有以下四种方法

方法描述
FileReader.abort()终止读取操作
FileReader.readAsArrayBuffer()开始读取指定文件中的内容，一旦完成，result属性中保存的是被读取文件的ArrayBuffer数据对象
FileReader.readAsBinaryString()开始读取指定文件中的内容，一旦完成，result属性中保存的是所读取文件的原始二进制数据
FileReader.readAsDataURL()开始读取指定文件中的内容，一旦完成，result属性中是一个data:URL格式的Base64字符串以表示所读取文件的内容
FileReader.readAsText()开始读取指定文件中的内容，一旦完成，result属性中保存的是一个字符串以表示所读取的文件内容
  • 理解 FileReader.abort()的使用
dealFile () {this.fileList.forEach(item => {const reader = new FileReader()reader.abort()console.log('走到这了1')reader.onload = (res) => {console.log('走到这了2')}})
},

 

由于 FileReader.abort() 终止了读取操作，所以不会执行onload执行完毕触发的函数中的代码

  • 理解 FileReader.readAsArrayBuffer()的使用
dealFile () {this.fileList.forEach(item => {const reader = new FileReader()reader.readAsArrayBuffer(item)reader.onload = (res) => {console.log('执行readAsArrayBuffer返回的数据', res)console.log('返回的result值为：', res.target.result)}})
},

  • 理解 FileReader.readAsBinaryString() 的使用
dealFile () {this.fileList.forEach(item => {const reader = new FileReader()reader.readAsBinaryString(item)reader.onload = (res) => {console.log('执行readAsBinaryString返回的数据', res)console.log('返回的result值为：', res.target.result)}})
},

注意：该信息是原始的二进制文件信息 

  •  理解 FileReader.readAsDataURL() 的使用
dealFile () {this.fileList.forEach(item => {const reader = new FileReader()reader.readAsDataURL(item)reader.onload = (res) => {console.log('执行readAsDataURL返回的数据', res)console.log('返回的result值为：', res.target.result)}})
},

  • 理解 FileReader.readAsText() 的使用
dealFile () {this.fileList.forEach(item => {const reader = new FileReader()reader.readAsText(item)reader.onload = (res) => {console.log('执行readAsText返回的数据', res)console.log('返回的result值为：', res.target.result)}})
},

 注意：小编这里识别的是txt文档中的文字，如果上传的是图片，会说乱码

2.2.4.3  了解fileReader对象基本事件
  • 查看回调事件

事件方法描述
FileReader.onabort()处理abort事件，该事件在读取操作被中断时触发
FileReader.onerror()处理error事件，该事件在读取操作发生错误时触发
FileReader.onload()处理load事件，该事件在读取操作完成时触发
FileReader.onloadstart()处理loadstart事件，该事件在读取操作开始时触发
FileReader.onloadend()处理loadend事件，该事件在读取操作结束时（成功或失败）触发
FileReader.onprogress()处理progress事件，该事件正在读取时触发
  •  使用方法：
dealFile () {this.fileList.forEach(item => {const reader = new FileReader()reader.onabort = (res) => {console.log('读取中断了onabort', res)}reader.onerror = (res) => {console.log('读取发生错误了onerror', res)}reader.onload = (res) => {console.log('读取完成了onload', res)}reader.onloadstart = (res) => {console.log('读取开始了onloadstart', res)}reader.onloadend = (res) => {console.log('读取结束了onloadend', res)}reader.onprogress = (res) => {console.log('读取进行中onprogress', res)}})
},
  •  输出结果

  • 由上可知执行顺序为

 1、onloadstart -> onprogress -> onload  -> onloadend 

2、当使用 reader.abort() 方法中断读取时会执行onabort 

3、当读取错误时会执行onerror

第三章 理解四个对象的使用

3.1 file与blob对象的使用

3.1.1 file对象转blob对象

fileToBlob (file) {// new Blob([文件二进制流], 文件类型)const blob = new Blob([file], { type: file.type }) // 直接利用Blob的方法console.log('blob', blob)return blob
},

3.1.2 blob对象转file对象

// blob二进制流转file二进制流注意要再携带参数文件名
blobToFile (blob, fileName) {// new File([blob二进制流], 文件名, 文件类型)const file = new File([blob], fileName, { type: blob.type })console.log('file', file)
},

3.2 formData的使用

前后端传参：掌握FormData并解决form-data类型传参问题_前端formdata传参-CSDN博客

第四章 实战应用

4.1 单文件上传

  • 利用input元素的accept属性限制上传文件的类型，multiple限制能否多选
  •  完整代码：

        -- html部分——

<template><div><input type="file" @change="fileChange"/>// 该按钮支持单个文件上传与多个文件上传<button @click="submit">多选提交</button><span v-for="(item, index) in fileList" :key="index">{{ item.name }}</span></div>
</template>

         -- js部分——

<script>
import axios from 'axios'
export default {data () {return {fileList: [] // 定义空数组存储多个文件}},components: {},methods: {fileChange (e) {// 一个由不同文件对象组成的对象console.log('文件对象e，文件方法：e.target.files', e, e.target.files)// 单文件上传this.fileList = []this.fileList.push(e.target.files[0])},async submit () {const _formdata = new FormData()// 循环fileList,每次都创建一个formdata对象上传this.fileList.forEach(async item => {// 转二进制流形式上传const blob = new Blob([item], { type: item.type })console.log('blob', blob)_formdata.append('files', blob, item.name)})axios({url: '/api/upload',method: 'POST',headers: {'Content-type': 'multipart/form-data'},data: _formdata}).then(response => {console.log(response)}).catch(err => {console.log(err)})}}
}

        -- 页面展示：

  • 上传成功（只选择一个文件上传即可）

  •  传参

4.2 多文件上传

  • 将多个文件放到一个数组内，然后循环这个数组内的文件对象，利用formdata实现；可以每处理一次，然后调用一次接口，上传一个文件；也可以将数组中的文件对象都处理好之后，调用接口上传所有文件

  • 注意：该接口的实现需要与后端商量好可以如何上传

  • html部分——
<template><div>// 支持批量上传<input type="file" @change="fileChange" multiple />// 该按钮支持单个文件上传与多个文件上传<button @click="submit">多选提交</button><span v-for="(item, index) in fileList" :key="index">{{ item.name }}</span></div>
</template>
  • 方法一：遍历数组中的文件对象，利用formdata处理值，每处理一次，调用一次方法
<script>
import axios from 'axios'
export default {data () {return {fileList: [] // 定义空数组存储多个文件}},components: {},methods: {fileChange (e) {// 一个由不同文件对象组成的对象console.log('文件对象e，文件方法：e.target.files', e, e.target.files)// 检测e.target.files是否有多个文件if (e.target.files.length > 1) {// 如果上传了多个文件将其合并this.fileList = [...this.fileList, ...e.target.files]// this.fileList = this.fileList.concat(e.target.files)} else {this.fileList.push(e.target.files[0])}},async submit () {// 循环fileList,每次都创建一个formdata对象上传this.fileList.forEach(async item => {const _formdata = new FormData()const blob = new Blob([item], { type: item.type })console.log('blob', blob)_formdata.append('files', blob, item.name)axios({url: '/api/upload',method: 'POST',headers: {'Content-type': 'multipart/form-data'},data: _formdata}).then(response => {console.log(response)}).catch(err => {console.log(err)})})}}
}

 

  •  方法二：遍历数组中的文件对象，利用formdata处理值，利用formdata.append将每一次处理的值添加到formdata对象中，最后上传所有文件
<script>
import axios from 'axios'
export default {data () {return {fileList: [] // 定义空数组存储多个文件}},components: {},methods: {fileChange (e) {// 一个由不同文件对象组成的对象console.log('文件对象e，文件方法：e.target.files', e, e.target.files)// 检测e.target.files是否有多个文件if (e.target.files.length > 1) {// 如果上传了多个文件将其合并this.fileList = [...this.fileList, ...e.target.files]// this.fileList = this.fileList.concat(e.target.files)} else {this.fileList.push(e.target.files[0])}},async submit () {const _formdata = new FormData()// 循环fileList,每次都创建一个formdata对象上传this.fileList.forEach(async item => {// 转二进制流形式上传const blob = new Blob([item], { type: item.type })console.log('blob', blob)_formdata.append('files', blob, item.name)})axios({url: '/api/upload',method: 'POST',headers: {'Content-type': 'multipart/form-data'},data: _formdata}).then(response => {console.log(response)}).catch(err => {console.log(err)})}}
}

 

  • 多文件上传两种方法可能会涉及到的问题：
  1. 当上传数量过多时（上百上千时），处理一条数据发一个请求，造成频繁的调用接口，对服务器会有一定的影响；用户频繁上传大量的图片，服务器需要处理和存储这些图片，会消耗大量的带宽和存储空间，这可能导致服务器负载增加，影响了服务器的性能表现。此外，图片上传过程中的网络传输也会占用服务器的网络资源，对其他用户的访问速度可能会有所影响。
  2. 但时当一次性上传或者打包上传特别大的文件时，又有可能出现上传文件过大，后端处理文件的时间太长，但是前端设置的响应时间没有这么长，到了时间之后前端就会报错，那么这上传又如何处理

4.3就是如何解决上述两个问题中的方法之一：分片上传

4.3 切片上传

4.3.1 如何处理多个图片

  • 当用户上传大量图片时，如果我们使用4.2中了两种方法会出现的问题已经了解了，那么我们如何解决呢，如何处理这批量的图片呢？
  • 小编给出如下方法：

input标签设置multiple上传大量文件 -> 上传时将每一个文件的二进制流封装成一个promise对象 -> 将每一个promise对象push到一个数组中 -> 利用promise.all确定数组中promise的状态值都是成功状态，promise.all为成功态才会执行代码 -> 遍历promise数组获取里面的二进制流文件 -> 利用jszip组件将所有的文件打包成压缩包的二进制流 -> (前端可以利用file-saver下载查看压缩包内容) -> 最后将改压缩包的二进制流进行分片上传

  • 处理多个图片的代码：

html部分——

<template><div><input type="file" @change="fileChange" multiple/><button @click="imageCompress">压缩图片</button><span v-for="(item, index) in fileList" :key="index">{{ item.name }}</span></div>
</template>

js部分——

<script>
import axios from 'axios'
import JSZip from 'jszip'
// import FileSaver from 'file-saver'export default {data () {return {fileList: [], // 定义空数组存储多个文件filesPromises: [] // 存放二进制文件流的promise数组}},components: {},methods: {// 利用promise处理多个图片// 将每一个文件的二进制流封装成一个promise对象dealFiles (file) {return new Promise((resolve, reject) => {resolve({ file })})},// 图片压缩imageCompress () {// 利用promise.allPromise.all(this.filesPromises).then(async (files) => {// 定义一个JSZip实例const zip = new JSZip()// 遍历数据 遍历promise数组获取里面的二进制流文件files.forEach(async (item, index) => {const { file } = itemconsole.log('每一个二进制流文件数据为：', file)// 添加需要压缩的文件，二进制流的形式await zip.file(file.name, file)})// 下载压缩包zip.generateAsync({ type: 'blob' }).then((content) => {console.log('压缩包的二进制流信息', content)// 下载上面压缩的压缩包FileSaver.saveAs(content, '合并的内容' + '.zip')})}).catch(err => {console.log(err)})},fileChange (e) {// 一个由不同文件对象组成的对象console.log('文件对象e，文件方法：e.target.files', e, e.target.files)// 检测e.target.files是否有多个文件if (e.target.files.length > 1) {this.fileList = [...this.fileList, ...e.target.files]// this.fileList = this.fileList.concat(e.target.files)} else {this.fileList.push(e.target.files[0])}// 处理文件信息成promise对象// 每一个promise对象push到一个数组this.fileList.forEach(item => {this.filesPromises.push(this.dealFiles(item))})console.log('存放文件的列表', this.fileList, this.filesPromises)}}
}
</script>

 页面效果——

上传多个文件：

将每一个promise对象push到一个数组中 ：

查看处理后的数据信息：

利用file-saver插件中的方法下载的内容： 

 

成功利用jszip插件中的方法将上传的图片打压成压缩包： 

 

4.3.2 实现切片上传 

  •  切片上传的核心就是利用二进制流中的size(文件大小)的slice方法，切割数据流，将每一段二进制流数据发送请求给后端，当发送完成后，由后端合并，最终返回前端想要的数据

 html部分——

<template><div><input type="file" @change="fileChange" multiple/><button @click="shardingSubmit">分片提交</button><button @click="imageCompress">压缩图片</button><span v-for="(item, index) in fileList" :key="index">{{ item.name }}</span><div>上传进度：{{ precent }}%</div></div>
</template>

js部分—— (先点击压缩图片按钮，再点击分片提交)

注意：一定要与后端沟通好传参的格式

<script>
import axios from 'axios'
import JSZip from 'jszip'
// import FileSaver from 'file-saver'export default {data () {return {fileList: [], // 定义空数组存储多个文件filesPromises: [], // 存放二进制文件流的promise数组compreeContent: null}},components: {},methods: {// 分片上传async shardingSubmit () {const size = 1024 * 1024// 注意 ======== 从这开始时小编传一个文件做的切片上传测试// const fileData = this.fileList[0]// console.log('fileData', fileData)// // const fileName = fileData.name.split('.')[0]// const blob = new Blob([fileData], { type: fileData.type })// 注意 ======== 到这结束，获取blob二进制数据流的过程const blob = this.compreeContentconst blobSize = blob.sizelet current, iconsole.log('blob', blob, blob.size)for (current = 0, i = 0; current < blobSize; current += size, i++) {const _formdata = new FormData()// 一次添加1M大小的切片  注意添加时的说明一般为文件名，后端接收后按照文件名标识拼接// 传参格式(与后端沟通好)_formdata.append('file', blob.slice(current, current + size))_formdata.append('chunkIndex', i + 1)_formdata.append('chunkTotal', Math.ceil(blobSize / size))_formdata.append('name', `片段${Math.ceil(blobSize / size)}`)// 这里可以通过传参动态解决_formdata.append('suffix', 'zip')// _formdata.append('suffix', 'png')axios({url: '/api/part',method: 'POST',headers: {'Content-type': 'multipart/form-data'},data: _formdata}).then(response => {console.log(response)// 计算当前上传进度，展示到页面// 小编只是实现了分片上传的逻辑，进度条未处理好this.precent = Math.ceil(((current) / blobSize) * 100)}).catch(err => {console.log(err)})}},// 利用promise处理多个图片// 将每一个文件的二进制流封装成一个promise对象dealFiles (file) {return new Promise((resolve, reject) => {resolve({ file })})},// 图片压缩/文件imageCompress () {// 利用promise.allPromise.all(this.filesPromises).then(async (files) => {// 定义一个JSZip实例const zip = new JSZip()// 遍历数据 遍历promise数组获取里面的二进制流文件files.forEach(async (item, index) => {const { file } = itemconsole.log('每一个二进制流文件数据为：', file)// 添加需要压缩的文件，二进制流的形式await zip.file(file.name, file)})// 下载压缩包zip.generateAsync({ type: 'blob' }).then((content) => {console.log('压缩包的二进制流信息', content)this.compreeContent = content// 下载上面压缩的压缩包// FileSaver.saveAs(content, '合并的内容' + '.zip')})}).catch(err => {console.log(err)})},fileChange (e) {// 一个由不同文件对象组成的对象console.log('文件对象e，文件方法：e.target.files', e, e.target.files)// 检测e.target.files是否有多个文件if (e.target.files.length > 1) {this.fileList = [...this.fileList, ...e.target.files]// this.fileList = this.fileList.concat(e.target.files)} else {this.fileList.push(e.target.files[0])}// 处理文件信息成promise对象// 每一个promise对象push到一个数组this.fileList.forEach(item => {this.filesPromises.push(this.dealFiles(item))})console.log('存放文件的列表', this.fileList, this.filesPromises)}}
}
</script>

 后端合并结果：（这里只是demo，具体情况具体解析）

第五章 源码

batch_file_upload: 文件上传（单个、多个、分片）代码

参数说明：

  • 单个/多个上传

  • 分片上传

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2779852.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

【制作100个unity游戏之23】实现类似七日杀、森林一样的生存游戏17（附项目源码）

【制作100个unity游戏之23】实现类似七日杀、森林一样的生存游戏17（附项目源码）

本节最终效果演示 文章目录 本节最终效果演示系列目录前言制作木板UI直接复制和工具一样的即可检查背包是否有指定数量的空插槽 源码完结 系列目录 前言 欢迎来到【制作100个Unity游戏】系列&#xff01;本系列将引导您一步步学习如何使用Unity开发各种类型的游戏。在这第23篇…
阅读更多...
Solidworks：平面工程图练习

Solidworks：平面工程图练习

把草图变成工程图&#xff0c;遇到第一个问题是线宽需要用鼠标选中后再设置线宽和颜色。我觉得应该有一个自动设置现款的功能&#xff0c;不知道有没有&#xff0c;我找了半天也没找到。 另一个问题是&#xff0c;作业代号字体上下颠倒了&#xff0c;不知道这是啥意思。 第三个…
阅读更多...
2024-02-11 Unity 编辑器开发之编辑器拓展2 —— 自定义窗口

2024-02-11 Unity 编辑器开发之编辑器拓展2 —— 自定义窗口

文章目录 1 创建窗口类2 显示窗口3 窗口事件回调函数4 窗口中常用的生命周期函数5 编辑器窗口类中的常用成员6 小结 1 创建窗口类 ​ 当想为 Unity 拓展一个自定义窗口时&#xff0c;只需实现继承 EditorWindow 的类即可&#xff0c;并在该类的 OnGUI 函数中编写面板控件相关的…
阅读更多...
DevOps：CI、CD、CB、CT、CD

DevOps：CI、CD、CB、CT、CD

目录 一、软件开发流程演化快速回顾 &#xff08;一&#xff09;瀑布模型 &#xff08;二&#xff09;原型模型 &#xff08;三&#xff09;螺旋模型 &#xff08;四&#xff09;增量模型 &#xff08;五&#xff09;敏捷开发 &#xff08;六&#xff09;DevOps 二、走…
阅读更多...
C++2024寒假J312实战班2.6

C++2024寒假J312实战班2.6

错题列表&#xff1a; #1Playlist #2分数线划定 #3Made Up #4图书管理员 #1Playlist 我们来介绍滑动窗口的写法&#xff1a; 1、使用一个滑动窗口k[l,r)在歌曲列表中移动。 2、同时利用一个unordered_set S来检测窗口中的歌曲是否有重复。如果窗口右端的歌曲在窗口内没有重复…
阅读更多...
Linux第46步_通过“添加自定义菜单”来学习menuconfig图形化配置原理

Linux第46步_通过“添加自定义菜单”来学习menuconfig图形化配置原理

通过“添加自定义菜单”来学习menuconfig图形化配置原理&#xff0c;将来移植linux要用到。 自定义菜单要求如下: ①、在主界面中添加一个名为“My test menu”&#xff0c;此菜单内部有一个配置项。 ②、配置项为“MY TESTCONFIG”&#xff0c;此配置项处于菜单“My test m…
阅读更多...
python+django高校教务选课成绩系统v0143

python+django高校教务选课成绩系统v0143

系统主要实现了以下功能模块&#xff1a; 本课题使用Python语言进行开发。基于web,代码层面的操作主要在PyCharm中进行&#xff0c;将系统所使用到的表以及数据存储到MySQL数据库中 使用说明 使用Navicat或者其它工具&#xff0c;在mysql中创建对应名称的数据库&#xff0c;并…
阅读更多...
【GAMES101】Lecture 21 动画

【GAMES101】Lecture 21 动画

目录 关键帧&#xff08;Keyframe animation&#xff09; 物理仿真&#xff08;Physical simulation&#xff09; 质点弹簧系统 粒子系统 运动学&#xff08;Kinematics&#xff09; 正运动学&#xff08;Forward Kinematics&#xff09; 逆运动学&#xff08;Inverse K…
阅读更多...
Centos7安装nginx yum报错

Centos7安装nginx yum报错

Centos7安装nginx yum报错&#xff0c;yum源报错解决办法&#xff1a; 1、更新epel源后&#xff0c;出现yum报错 [roothacker117 ~]# yum install epel-release&#xff08;安装成功&#xff09; [roothacker117 ~]# yum install nginx&#xff08;安装失败&#xff0c;提示如…
阅读更多...
STM32 STD/HAL库驱动W25Q64模块读写字库数据+OLED0.96显示例程

STM32 STD/HAL库驱动W25Q64模块读写字库数据+OLED0.96显示例程

STM32 STD/HAL库驱动W25Q64 模块读写字库数据OLED0.96显示例程 &#x1f3ac;原创作者对W25Q64保存汉字字库演示&#xff1a; W25Q64保存汉字字库 &#x1f39e;测试字体显示效果&#xff1a; &#x1f4d1;功能实现说明 利用W25Q64保存汉字字库&#xff0c;OLED显示汉字的时…
阅读更多...
opencv 图像色彩空间转化

opencv 图像色彩空间转化

今天看了b站贾志刚的课&#xff0c;觉得不错&#xff0c;特地做学习笔记来和小伙伴分享 贾志刚的这个好像是2.0版本,30小时的,语言更加精炼,适合初级入门学习 第一节是常规安装 看他的步骤装就行了,记得配置完点应用再点确定,我第一次就是 没点然后就失败了,又得重配置一次…
阅读更多...
重温阿里云宝塔面板部署前后端项目

重温阿里云宝塔面板部署前后端项目

首先祝大家新年快乐啊&#xff01; 回到老家&#xff0c;便打算趁这一段空闲时间提升一下自己&#xff0c;重点是学习实践一下echarts相关内容&#xff0c;很多公司项目都需要实现可视化&#xff0c;所以在bilibili上找了黑马的一个教程开始学习&#xff0c;不同的是&#xff…
阅读更多...
苍穹外卖实操笔记六---缓存商品，购物车功能

苍穹外卖实操笔记六---缓存商品，购物车功能

苍穹外卖实操笔记六—缓存商品&#xff0c;购物车功能 一.缓存菜品 可以使用redis进行缓存&#xff1b;另外&#xff0c;在实现缓存套餐时可以使用spring cache提高开发效率&#xff1b;   通过缓存数据&#xff0c;降低访问数据库的次数&#xff1b; 使用的缓存逻辑&#…
阅读更多...
bert-vits2本地部署报错疑难问题汇总

bert-vits2本地部署报错疑难问题汇总

环境&#xff1a; bert-vits2.3 win 和wsl 问题描述&#xff1a; bert-vits2本地部署报错疑难问题汇总 解决方案&#xff1a; 问题1: Conda安装requirements里面依赖出现ERROR: No matching distribution found for opencc1.1.6 解决方法 需要在 Python 3.11 上使用 Op…
阅读更多...
【Spring学习】Spring Data Redis：RedisTemplate、Repository、Cache注解

【Spring学习】Spring Data Redis：RedisTemplate、Repository、Cache注解

1&#xff0c;spring-data-redis官网 1&#xff09;特点 提供了对不同Redis客户端的整合&#xff08;Lettuce和Jedis&#xff09;提供了RedisTemplate统一API来操作Redis支持Redis的发布订阅模型支持Redis哨兵和Redis集群支持基于Lettuce的响应式编程支持基于JDK、JSON、字符…
阅读更多...
HiveSQL——用户行为路径分析

HiveSQL——用户行为路径分析

注&#xff1a;参考文档&#xff1a; SQL之用户行为路径分析--HQL面试题46【拼多多面试题】_路径分析 sql-CSDN博客文章浏览阅读2k次&#xff0c;点赞6次&#xff0c;收藏19次。目录0 问题描述1 数据分析2 小结0 问题描述已知用户行为表 tracking_log&#xff0c; 大概字段有&…
阅读更多...
如何从 iPhone 恢复已删除的视频：简单有效方法

如何从 iPhone 恢复已删除的视频：简单有效方法

无论您是在尝试释放空间时不小心删除了 iPhone 上的视频&#xff0c;还是在出厂时清空了手机&#xff0c;现在所有数据都消失了&#xff0c;都不要放弃。有一些方法可以恢复这些视频。 在本文中&#xff0c;我们将向您展示六种最有效的数据恢复方法&#xff0c;可以帮助您从 i…
阅读更多...
【LeetCode每日一题】二维前缀和基本概念与案例

【LeetCode每日一题】二维前缀和基本概念与案例

二维前缀和 根据某个块块 的 左上角坐标&#xff0c;和右下角坐标 求出 块块的累加和。 304. 二维区域和检索 - 矩阵不可变 /*** param {number[][]} matrix*/ var NumMatrix function(matrix) {let row matrix.length;let col matrix[0].length;// 初始化一个二维数组&am…
阅读更多...
综合项目---博客

综合项目---博客

一.运行环境 192.168.32.132 Server-Web linux Web 192.168.32.133 Server-NFS-DNS linux NFS/DNS 基础配置 1.配置主机名静态ip 2.开启防火墙并配置 3.部分开启selinux并配置 4.服务器之间通过阿里云进行时间同步 5.服务器之间实现ssh免密…
阅读更多...
antdpro框架npm install 报错，切换tyarn安装成功。

antdpro框架npm install 报错，切换tyarn安装成功。

报错日志 有时间补 当前版本 解决办法 进入工作目录 安装官方推荐的tyarn工具&#xff1a;npm install yarn tyarn -g 进行依赖安装&#xff1a;tyarn 启动项目 &#xff1a;tyarn start 注意&#xff1a; 技术迭代较快&#xff0c;建议查询官网后实践&#xff0c;以上作为…
阅读更多...
最新文章

Copyright @ 2022~2023