流程如下：
1、先引入el-upload
2、調(diào)用上傳前事件
3、上傳前事件中將file文件轉(zhuǎn)formData
4、調(diào)用后端oss接口上傳文件
5、上傳完成后回顯數(shù)據(jù)
6、點(diǎn)擊圖片/視頻預(yù)覽

圖片和視頻的上傳（文件上傳通用）

<el-upload class="upload-demo" action="" :file-list="fileList"  :before-upload="beforeAvatarUpload">
    <el-button icon="el-icon-upload" size="small" type="primary">
        上傳
    </el-button>
</el-upload>

beforeAvatarUpload為文件上傳前的操作，該方法中會(huì)攜帶一個(gè)參數(shù)file，file就是當(dāng)前上傳的文件，我們需要用new FormData()轉(zhuǎn)為file文件格式，調(diào)用后端接口上傳圖片。

beforeAvatarUpload(file) {
     let formData = new FormData();
     formData.append('file',file)
     // 調(diào)用oss后端接口
    ossUpload(formData).then(el=>{
       // 上傳成功后的回調(diào)：el，該參數(shù)內(nèi)的url就是http的訪問(wèn)地址，將該方法存儲(chǔ)到回顯的數(shù)據(jù)中
     this.upload(el.data)
    }).catch(err=>{console.log(err)})
      
},

 upload(val) {
    // 此處可以校驗(yàn)上傳的格式，如果視頻格式不是mp4則會(huì)提示
   if(val.fileSuffix != ".mp4"){
       return this.$message.error('視頻格式不正確')
    }
   // console.log(11111,val,val.fileSuffix)
   this.dataList.push({
     fiParentId: this.parentId,
     fvEstateType: this.info.fvEstateType,
     fiTaskType: this.info.fiTaskType,
     fvUrl: val.url,
     fiType: "",
     fvName: "",
     fvRemark: "",
     fiSort: 0,
     id: 0
   })
}

圖片的上傳也是一樣的，此時(shí)圖片上傳和視頻上傳的一般流程就結(jié)束了，頁(yè)面列表中遍歷dataList即可回顯數(shù)據(jù)。

關(guān)于圖片點(diǎn)擊放大回顯

點(diǎn)擊列表圖片，通過(guò)作用域插槽將圖片的url地址保存到dialogImageUrl中，在彈框中即可回顯。

<!-- 圖片 -->   
<el-dialog :visible.sync="dialogVisible" width="80%" top="1%">
      <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

視頻的回顯方式相同

<el-dialog :visible.sync="dialogVisible" width="80%" top="1%">
  <video
        :src="dialogVideoUrl"
        controls
        autoPlay
        preload="auto"
        width="100%"
        height="1000px"
      >
   </video>
</el-dialog>

在這里需要注意的是，這種方法只適用于單張圖片或小視頻文件的上傳，大文件并不適合，大文件的上傳需要考慮數(shù)據(jù)切片，以及斷點(diǎn)續(xù)傳。

在這里提一下數(shù)據(jù)切片的思路，我們上傳文件時(shí)會(huì)有一個(gè)文件大小，比如一個(gè)文件有1MB大小，我們一次只上傳600kb，那么切片的文件大小就是600kb，在上傳的時(shí)候?qū)⒂?jì)算文件大小 1MB / 600kb 向上取整 = 2，切片數(shù)量就是2，在通過(guò)循環(huán)切片上傳，每次上傳一個(gè)切片，當(dāng)所有切片上傳完時(shí)，任務(wù)結(jié)束。

下面提一下斷點(diǎn)續(xù)傳：

實(shí)現(xiàn)斷點(diǎn)續(xù)傳（斷點(diǎn)下載）

實(shí)現(xiàn)斷點(diǎn)續(xù)傳（斷點(diǎn)下載）可以提高文件下載的效率和穩(wěn)定性，特別對(duì)于大文件或不穩(wěn)定的網(wǎng)絡(luò)環(huán)境更為重要。以下是前端實(shí)現(xiàn)斷點(diǎn)續(xù)傳的一般步驟：

1、支持服務(wù)器端：首先，確保服務(wù)器端支持?jǐn)帱c(diǎn)續(xù)傳。服務(wù)器應(yīng)當(dāng)能夠處理帶有Range和Content-Range頭部的請(qǐng)求，并能夠正確返回指定區(qū)間的數(shù)據(jù)。

2、計(jì)算上次下載進(jìn)度：在前端，需要記錄上次下載的進(jìn)度，以便在斷點(diǎn)續(xù)傳時(shí)從上次斷開(kāi)的地方繼續(xù)下載?？梢允褂胠ocalStorage或sessionStorage來(lái)存儲(chǔ)上次下載的進(jìn)度。

3、發(fā)起下載請(qǐng)求：在前端，通過(guò)創(chuàng)建一個(gè)XMLHttpRequest對(duì)象或使用fetchAPI來(lái)發(fā)起下載請(qǐng)求。同時(shí)，設(shè)置Range頭部，指定下載的起始位置。

4、接收響應(yīng)：當(dāng)服務(wù)器響應(yīng)下載請(qǐng)求時(shí)，獲取響應(yīng)的狀態(tài)碼和響應(yīng)頭部信息。如果狀態(tài)碼為 206（Partial Content），表示服務(wù)器支持?jǐn)帱c(diǎn)續(xù)傳，并且返回了指定區(qū)間的數(shù)據(jù)。如果沒(méi)有響應(yīng)206狀態(tài)碼，則需要重新從頭開(kāi)始下載。

5、保存已下載的數(shù)據(jù)：在接收到響應(yīng)后，將返回的數(shù)據(jù)保存下來(lái)?？梢允褂肂lob或ArrayBuffer對(duì)象來(lái)保存二進(jìn)制數(shù)據(jù)。

6、更新下載進(jìn)度：在接收到每個(gè)數(shù)據(jù)塊后，更新下載進(jìn)度?？梢酝ㄟ^(guò)計(jì)算已下載的數(shù)據(jù)大小和總文件大小的比例來(lái)表示下載進(jìn)度，并將其顯示在用戶界面上。

7、保存斷點(diǎn)信息：在每次下載進(jìn)度更新時(shí)，同時(shí)將已下載的數(shù)據(jù)大小和總文件大小保存到本地存儲(chǔ)中，以便下次繼續(xù)下載時(shí)使用。

8、處理下載完成：當(dāng)下載完成時(shí)，根據(jù)需要進(jìn)行相應(yīng)的操作，例如保存文件、提示用戶下載完成等。

9、處理下載錯(cuò)誤：在下載過(guò)程中可能會(huì)發(fā)生網(wǎng)絡(luò)錯(cuò)誤或其他問(wèn)題，需要通過(guò)錯(cuò)誤處理機(jī)制來(lái)處理這些情況?？梢员O(jiān)聽(tīng)XMLHttpRequest對(duì)象的onerror事件或使用catch方法捕捉fetchAPI的錯(cuò)誤，并根據(jù)需要進(jìn)行相應(yīng)的處理和重試操作。

斷點(diǎn)續(xù)傳原文鏈接：https://blog.csdn.net/weixin_55846296/article/details/131455411

element tree組件連接線以及懶加載 （??點(diǎn)擊直達(dá)）
再也不用擔(dān)心組件跨層級(jí)的數(shù)據(jù)共享和方法驅(qū)動(dòng)了 （??點(diǎn)擊直達(dá)）
前端換膚，聊一聊主題切換那些事（??點(diǎn)擊直達(dá)）
echarts數(shù)據(jù)可視化-動(dòng)態(tài)折線堆積圖 （??點(diǎn)擊直達(dá)）
vue3使用百度地圖（??點(diǎn)擊直達(dá)）

如果覺(jué)得這篇文章對(duì)你有幫助，歡迎點(diǎn)贊??、收藏??、轉(zhuǎn)發(fā)?哦~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-719538.html

到了這里，關(guān)于圖片和視頻的上傳（文件上傳通用）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！