最近在开发一个小项目,前端用的是vue,jquery,bootstrap,element等技术开发的，后端则是springboot.当我想开发一个能让用户上传多个图片或者视频的功能时,却遇到了点麻烦,最主要的麻烦就是前端怎样方便的让用户上传图片和视频,并且保证前端页面的美观和用户的体验度,由于我主要用的前端UI框架是element,而element也有对应的upload组件,但我觉得element
转载
2024-05-06 20:57:54
382阅读
<template>
<div class="reg-container">
<el-form :model="regForm" :rules="regRules" ref="myRegForm"
label-width="auto" class="reg-form" status-icon>
转载
2024-10-09 17:09:06
44阅读
小帽学堂29. 删除视频接口// src\views\edu\course\chapter.vue
// 点击x调用的方法
// 点击确定调用的方法
handleVodRemove() {
// 调用接口的删除视频方法
video.deleteAliyunvod(this.video.videoSourceId)
.then(response =
转载
2024-10-08 19:45:52
151阅读
需求为： 点击上传按钮上传给后台，后台返回给前端一个ID，前端需要保存一下，所有文件都上传之后点击保存把之前存好的ID传给后台。预览首先需要循环一下这10条数据，代码为<el-row type="flex" :gutter="20" justify="start">
<el-col :span="6" v-for="item in stateList">
&l
转载
2024-03-26 07:00:27
250阅读
mp4文件也就是通常的视频格式文件，那么往往这类的视频内存都是较大的，视频内存过大不仅影响我们使用更会造成传输慢的现象，那么mp4文件太大怎么变小呢？这里将会分享俩种压缩方法，下面我们一起来试试视频压缩的效果吧！ 第一种压缩方法：1、首先我们打开的是一个在线文档转换器，这里包含各类文件转换，对于视频压缩这样一个操作也是轻松搞定。进入后，首先选择视频压缩功能，进入待压缩操作页面。
转载
2024-10-17 11:39:12
34阅读
前言：使用element上传图片之后，文件file下的url是blob：http//localhost：8080地址，后端不好处理问题如上图所示采用比较笨的js解决方法，将bolb文件打开，读取src属性(这是一个base64的数据流)，把src的内容一起发送给后端。这是一个上传图片子组件demo
点击上传 export default {
name: 'regShopImg',
da
转载
2024-06-12 12:51:02
421阅读
第一步:安装//excel文档预览组件
npm install @vue-office/excel第二步：获取base64编码，存入sessionStorage并通过router.resolve 结合 window.open 打开新窗口（参考文章--参数传递）let baseContent = res[0].data.Base64Content//获取后端返回的base64编码
//使用s
由于csdn平台审核机制你能携带平台名称，下面以视频平台代替；由于公司的项目跟视频平台代合作，公司的视频会上传到视频平台代云点播平台然后在从平台获取视频播放；这里是上传和播放的 vue 实现；只是简单的实现，具体的操作还需要根据自己的需求进行更改； 文章目录1、准备工作2、上传视频3、播放视频 1、准备工作1、注册账户：https://www.polyv.net/ 2、进入的后台管理 选择云点播功
转载
2024-08-01 18:59:18
637阅读
前端上传大文件、视频的时候会出现超时、过大、很慢等情况，为了解决这一问题，跟后端配合做了一个切片的功能。我这个切片功能是基于 minion 的，后端会把文件放在minion服务器上。具体看后端怎么做1、在项目的 util(这个文件夹是自己创建的，如果项目里没有可以自行创建) 文件家中创建一个js文件 upload.jsimport axios from 'axios';
import m
效果：
前提：
quill-editor只支持三种标签p b span ,如果要用其他等标签，要用Quill中提供的register方法去注册标签。
对于原生的视频上传，只能上传地址，现在要实现本地上传
对于本地上传，需要组件辅助，上传时打开本地文件，如下。
对于音频及其他，要组件工具栏中自定义，因为原生没有对音频图标进行封装（格外注意
转载
2024-04-01 00:03:29
703阅读
前言这三个功能是所有项目基本都是常用的功能 上传图片，上传文件，上传视频功能 我最近也是又在做上传文件的功能 然后发现以前写了但是没有记录，导致又要从新弄很麻烦 所以这一次直接一次把三个常用的功能代码都开个帖子记录下来，方便以后复制效果图这是上传图片和上传文件的样式，上面的是图片的，下面是上传文件的 这是拿到的文件的信息，我这里上传的pdf的文件 这里是上传的图片的信息。 这里是上传图片的效果图
转载
2024-03-28 06:21:56
481阅读
<template>
<div class="home-main">
<!-- 报表中心 -->
<div class="tree">
<el-row :gutter="24">
<el-col :span="5">
<el-card class="t
转载
2024-09-28 09:36:28
95阅读
视频太大怎么压缩变小一点？随着电子设备和网络媒体的发展，视频已经完全融入了我们的生活当中，大家更喜欢用视频记录一些生活和工作中的点点滴滴。在我们拍摄的视频文件中，大家基本都会遇到一个烦恼，那就是因为拍摄的视频过大导致的要么无法发送给对方，要么被限制上传到自媒体平台，而且还会占用设备的大量内存情况的发生。 那当我们遇到体积大的视频文件应该怎么办？别担心，我们只需
一、上传到后端指定的服务器 后端人员有配置好服务器地址，我们可以直接用element-ui的组件进行视频上传，直接将el-upload组件的action属性配置成后端给的地址即可。一篇比较好的参考文章，细看1.引入库element官网引入库配置npm i element-ui -S2.配置上传
转载
2023-12-05 23:25:36
297阅读
在
Vue中，有几种方式可以显示图片下面是详细的代码说明：1. 使用<img>标签：<template>
<div>
<img src="/path/to/image.jpg" alt="Image">
</div>
</template>在上面的代码中，我们使用<img>标签来显示图片。src属性指
转载
2024-10-09 11:11:48
2070阅读
点赞
# JQuery上传视频并预览实现
## 概述
在本文中，我将向你介绍如何使用jQuery实现上传视频并预览功能。我会分步骤地指导你完成整个过程，并提供必要的代码和注释来帮助你理解。
## 步骤
下面是实现这个功能的步骤概览：
| 步骤 | 描述 |
|---|---|
| 1 | 创建HTML表单 |
| 2 | 使用jQuery监听文件选择事件 |
| 3 | 使用FileReader
原创
2023-08-15 20:16:32
182阅读
## 实现"jquery获取上传视频预览"的流程
为了帮助你实现"jquery获取上传视频预览"，我将按照以下步骤逐一介绍：
### 步骤一：创建HTML结构
首先，我们需要在HTML页面中创建一个文件上传表单和一个用于显示视频预览的元素。以下是一个示例的HTML结构：
```html
```
在这个示例中，我们使用了一个文件输入类型的表单元素来实现视频的上传。上传的文件将通过id为
原创
2023-11-25 08:26:28
82阅读
最近的业务中涉及到这样一个需求，在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长。初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed，分别在其中加入开始计时和清除计时的逻辑，通过后台的接口上报对应的培训素材的时间数据，即可达到目的。有了思路，我们就可以开始筹划具体的代码实现。定义开始结束计时函数在 dat
转载
2024-07-02 20:57:35
146阅读
对于前端开发者而言，javascript正扮演着越来越重要的地位，它不仅能为浏览器端赋能，在web服务器方面也有很大的价值(我们可以用nodeJS来写服务端代码，启动web服务器)，因此本文所要描述的，便是javascript在服务端的应用。我将介绍如何使用nodeJS来搭建一个mock服务器，方便前端自定义mock数据请求，提高前端开发的主观能动性和对项目健壮性的探索。我们将学到koa基本使用k
一、vue-video-player1.安装cnpm install vue-video-player -S
cnpm install 'video.js' -S2.导入使用在main.js中导入：import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
Vue.use(VueVideo
转载
2024-09-24 14:36:45
417阅读
