el-upload 上傳多個視頻

在這里插入圖片描述

          <el-form-item label="視頻" prop="video_url"><el-uploadclass="upload-demo"ref="uploadRef":multiple="true":on-change="handleChange":before-remove="beforeRemove":before-upload="beforeUploadVideo"action="/admin/uploads/posts?type=2":on-remove="handleRemove":file-list="fileListVid"limit="5":auto-upload="true":on-exceed="handleExceed":show-file-list="false"accept=".mp4,.avi,.mov"list-type="picture"><el-button slot="trigger" size="small" type="primary">選取文件</el-button>
{{--              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務器</el-button>--}}<div slot="tip" class="el-upload__tip">最多可以上傳5個不大于20M的視頻,推薦格式為:mp4、avi、mov</div></el-upload><div v-for="(video, index) in fileListVid" :key="index"><video :src="video.url" controls style="height: 150px;width: 150px;object-fit:fill;"></video></div></el-form-item>
  return {fileListVid:[],},methods: {handleChange(file, fileList) {this.fileListVid = fileList;},beforeRemove(file, fileList) {return this.$confirm(`確定移除 ${file.name}`);},  beforeUploadVideo(file) {let fileSize = file.size / 1024 / 1024 < 20if (// ['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(//         file.type,// ) == -1['video/mp4', 'video/avi'].indexOf(file.type,) == -1) {alert('請上傳正確的視頻格式')return false}if (!fileSize) {alert('視頻大小不能超過20MB')return false}},    handleExceed(files, fileList) {this.$set(fileList[0], 'raw', files[0]);this.$set(fileList[0], 'name', files[0].name);this.$refs['uploadRef'].clearFiles();//清除文件this.$refs['uploadRef'].handleStart(files[0]);//選擇文件后的賦值方法},handleRemove() {},// 提交維護工序信息submitForm(formName) {let self = this;if (self.fileListPic == null || self.fileListPic == [] || self.fileListPic.length==0) {self.$message.error('請上傳圖片');return false;}var data = self.createForm;var tmpPic = []var tmpVid = []this.fileListPic.forEach((file) => {tmpPic.push(file.response.url);});this.fileListVid.forEach((file) => {tmpVid.push(file.response.url);});data['pic_url'] = tmpPic;data['video_url'] = tmpVid;data['status'] = self.status;self.$refs[formName].validate((valid) => {if (valid) {let params = {'_token': LA.token,'data': data,};$.ajax({url: "/admin/processbase/store",type: "POST",data: params,dataType: 'json',beforeSend: function (res) {self.fullscreenLoading = true;},success: function (res) {self.$notify({title: res.title,message: res.message,type: res.type});if (res.code == 100) {self.fullscreenLoading = false;self.dialogCreateVisible = false;self.fileListPic = [];self.fileListVid = [];self.getData();}},error: function () {self.fullscreenLoading = false;}});} else {self.$notify({title: '警告',message: '填寫的信息有誤!!',type: 'warning'});self.fullscreenLoading = false;}});},//停用handleDelete(row) {let that = this;let list_id = row.idif (list_id) {that.$confirm('確認要停用?', '停用后不可恢復!', {confirmButtonText: '確認停用',cancelButtonText: '取消',type: 'success',callback: action => {if (action === 'confirm') {var data = {'_token': LA.token,'id': list_id,};$.ajax({url: "/admin/processbase/delete",type: "DELETE",data: data,dataType: 'json',success: function (data) {that.$notify({title: '停用',message: data.message,type: data.type});//刷新數據that.tableData = that.tableData.filter((sr) => {if (sr != row) {return sr;}});}});}}})}},}

這里是引用:
action=“/admin/uploads/posts?type=2”

    //文件上傳public static function upload_ajax_file(Request $request){$type = $request->type;if (!empty($request->file)){$tmp = $request->file;if($type == 1){$path = 'img/'; //圖片}elseif($type == 2){$path = 'video/';  //視頻}else{$path = getDateH(1);}if ($tmp->isValid()) { //判斷文件上傳是否有效$FileType = $tmp->getClientOriginalExtension(); //獲取文件后綴$FilePath = $tmp->getRealPath(); //獲取文件臨時存放位置//$FileName = $path.date('Y-m-d') .'/'. uniqid() . '.' . $FileType; //定義文件名$FileName = $path. uniqid() . '.' . $FileType; //定義文件名Storage::disk('admin')->put($FileName, file_get_contents($FilePath)); //存儲文件$url  = '/uploads/'.$FileName;return response()->json(['status' => 200, 'url' => $url,'message' => '文件上傳完成', 'type' => 'success']);}}}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/13694.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/13694.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/13694.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Flutter 中的 EditableText 小部件:全面指南

Flutter 中的 EditableText 小部件&#xff1a;全面指南 在Flutter中&#xff0c;EditableText是一個低級別的文本編輯組件&#xff0c;它提供了構建自定義文本編輯界面的能力。與TextField和TextFormField不同&#xff0c;EditableText提供了更多的靈活性&#xff0c;允許開發…

【LinuxC語言】鏈接文件

文章目錄 前言一、inode索引節點inode的作用為什么inode重要 二、文件鏈接的定義文件鏈接是什么硬鏈接&#xff08;Hard Link&#xff09;軟鏈接&#xff08;符號鏈接&#xff0c;Symbolic Link&#xff09;硬鏈接圖示&#xff1a;軟鏈接圖示&#xff1a; 硬鏈接應用場景限制和…

五步定位性能瓶頸

一、著手測試前的準備&#xff1a;優化數據流向與系統架構分析 在進行性能測試或系統優化之前&#xff0c;明確數據流向和系統架構的細節是至關重要的步驟。這不僅能夠幫助識別潛在的瓶頸&#xff0c;還能確保測試用例設計的全面性與針對性。以下是關鍵步驟和方法&#xff1a;…

實現本地訪問云主機,以及在云主機搭建FTP站點

前言 云計算是一種基于互聯網的計算模式&#xff0c;通過網絡提供按需訪問的計算資源和服務。核心概念是把計算能力視作一種公共資源&#xff0c;用戶可以根據自身需求動態分配和管理這些資源。 云主機 ECS (Elastic Compute Server)是一種按需獲取的云端服務器&#xff0c;提…

142.棧和隊列:用棧實現隊列(力扣)

題目描述 代碼解決 class MyQueue { public:stack<int> stIn; // 輸入棧&#xff0c;用于push操作stack<int> stOut; // 輸出棧&#xff0c;用于pop和peek操作MyQueue() {}void push(int x) {stIn.push(x); // 將元素壓入輸入棧}int pop() {// 如果輸出棧為空&…

虛擬列表 vue-virtual-scroller 的使用

npm 詳情&#xff1a;vue-virtual-scroller - npm (npmjs.com) 這里我使用的是RecycleScroller。 App.vue <template><RecycleScrollerclass"scroller":items"items":item-size"54"v-slot"{ item }"><list-item :it…

Flask Response 對象

文章目錄 創建 Response 對象設置響應內容設置響應狀態碼設置響應頭完整的示例拓展設置響應的 cookie重定向響應發送文件作為響應 總結 Flask 是一個 Python Web 框架&#xff0c;用于快速開發 Web 應用程序。在 Flask 中&#xff0c;我們使用 Response 對象來構建 HTTP 響應。…

【論文筆記】advPattern

【論文題目】 advPattern: Physical-World Attacks on Deep Person Re-Identification via Adversarially Transformable Patterns Abstract 本文首次嘗試對深度reID實施魯棒的物理世界攻擊。提出了一種新穎的攻擊算法&#xff0c;稱為advPattern&#xff0c;用于在衣服上生成…

文本轉語音軟件-TTSMaker

一、TTSMaker介紹 TTSMaker&#xff08;馬克配音&#xff09;是一款免費的文本轉語音工具&#xff0c;提供語音合成服務&#xff0c;支持多種語言&#xff0c;包括中文、英語、日語、韓語、法語、德語、西班牙語、阿拉伯語等50多種語言&#xff0c;以及超過300種語音風格。 可…

C語言指針相關知識(第四篇章)(非常詳細版)

文章目錄 前言一、什么是回調函數二、qsort函數的介紹(默認升序排序)三、qsort函數的模擬實現&#xff08;通過冒泡排序&#xff09;總結 前言 本文介紹了回調函數&#xff0c;qsort函數的使用&#xff0c;以用冒泡排序來模擬實現qsort函數 提示&#xff1a;以下是本篇文章正文…

持續總結中!2024年面試必問 20 道 Redis面試題(四)

上一篇地址&#xff1a;持續總結中&#xff01;2024年面試必問 20 道 Redis面試題&#xff08;三&#xff09;-CSDN博客 七、Redis過期鍵的刪除策略&#xff1f; Redis 過期鍵的刪除策略主要涉及以下幾種方式&#xff1a; 1. 定時刪除&#xff08;Timed Expiration&#xff…

面試的內容

1.C的三大特性&#xff1a;封裝&#xff0c;繼承&#xff0c;多態 2.C11的特性 3.NULL與Nullptr的區別: nullptr是一個特殊的空指針常量&#xff0c;不能被隱式轉換為其他類型。 NULL 在一些情況下可能會發生隱式類型轉換 4.智能指針 5.stl/Qt stl stl容器包含哪些&…

如何在沒有密碼或Face ID的情況下解鎖iPhone

iPhone 是一款以其一流的安全功能而聞名的設備&#xff0c;包括面容 ID 和密碼。但是&#xff0c;你有沒有想過&#xff0c;如果沒有這些安全措施&#xff0c;你是否可以解鎖iPhone&#xff1f;無論您是忘記了密碼&#xff0c;Face ID不起作用&#xff0c;還是只是對其他方法感…

5.23-

回顧 I0多路復用的原理? 程序首先向操作系統發起一個IO多路復用請求&#xff0c;告訴操作系統需要監視哪些IO通道。這些IO通道可以包括網絡套接字、文件描述符等操作系統隨后會將這些IO通道放入一個隊列中&#xff0c;并在某個IO通道就緒時&#xff08;如數據到達、文件可讀…

「YashanDB遷移體驗官」Mysql生產環境遷移至YashanDB數據庫深度體驗

「YashanDB遷移體驗官」Mysql生產環境遷移至YashanDB數據庫深度體驗 1. 前言1.1 產品介紹1.2 產品架構1.3 產品規格1.3.1 數據庫版本支持1.3.2 數據類型支持 2. YMP安裝2.1 環境說明2.2 執行安裝2.3 訪問YMP2.3.1 YMP登錄界面2.3.2 YMP遷移流程 3. YMP數據遷移3.1 創建數據源3.…

離線模式下載安裝gcc-4.8.5

目錄 一,下載gcc離線安裝包 二,下載gcc依賴包 三,安裝gcc 1, 解壓 2, 將依賴庫放置環境 3, 安裝 3.1自動安裝 3.1.1 執行依賴庫的編譯 3.1.2 新建編譯目錄 3.1.3 配置編譯環境 3.1.4 編譯 3.1.5 安裝 3.2 手動安裝 3.2.1 安裝GMP-4.3.2 3.2.2 安裝mpf…

【pytorch】 Win11下cuda,cudnn以及pytorch環境安裝

Win11下cuda&#xff0c;cudnn以及pytorch環境安裝 CUDA環境安裝1. 查看CUDA版本1.1 打開NVIDIA控制面板&#xff0c;可以點右下角的NVIDIA設置1.2 點擊系統信息&#xff0c;選擇組件查看CUDA版本 2. 下載對應的CUDA版本3. 安裝3.1 啟動exe文件安裝 4. 驗證安裝結果 CUDNN 環境…

【MySQL精通之路】InnoDB-啟動選項和系統變量

系統變量可以在服務器啟動時設置TRUE或FALSE啟用禁用&#xff0c;也可以通過使用--skip前綴來禁用 例如&#xff1a; 要啟用或禁用InnoDB自適應哈希索引&#xff0c;可以在命令行中使用--skip-innodb-adaptive-hash-index或--innodb-adaptive-hash-index&#xff0c;或者在配置…

JavaSE : 注解 Annotation

注解 Java中的注解&#xff08;Annotation&#xff09;是一種元數據形式&#xff0c;用于向編譯器或JVM提供有關程序元素&#xff08;如類、方法、變量、參數和包&#xff09;的附加信息。注解不會直接影響程序的行為或結構&#xff0c;但它們可以被編譯器、開發工具或運行時環…

Apache CXF Aegis databinding SSRF 高危漏洞修復

一、漏洞修復 Apache CXF Aegis databinding SSRF漏洞 Spring Web UriComponentsBuilder URL解析不當漏洞 二、修復步驟 1、Apache CXF Aegis databinding SSRF漏洞修復 步驟&#xff1a; 進入服務器搜索 databinding find -name *databinding* 發現版本是3.1.6 果斷…