vue vantUI實現文件（圖片、文檔、視頻、音頻）上傳（多文件）
更新時間：2019年10月15日 10:27:46 作者：Nanana
這篇文章主要介紹了vue vantUI實現文件（圖片、文檔、視頻、音頻）上傳（多文件），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
說在前面
網上有很多種文件上傳的方法，根據公司最近的業(yè)務需求，要求實現多種文件的上傳，在實現過程中，查閱了很多資料，最后，終于把功能實現了，開心！
<template>
<div>
<v-header :left-text="`上傳${columnName}`"></v-header>
<div class="upload">
<div v-if="columnName === '視頻'">
<div class="forPreview_video" v-for="(item, index) in uploadVideoList" :key="index">
<video :src="videoSrc"></video>
<van-icon name="delete" @click="delBtn(index)" class="delte"/>
</div>
<van-uploader v-show="uploadVideoList.length < 2" preview-size="80px" accept="video/*" :before-read="beforeRead" :after-read="afterRead"></van-uploader>
</div>
<div v-if="columnName === '文檔'">
<div class="forPreview_doc" v-for="(item, index) in uploadDocList" :key="index">
<img src="../../assets/img/resource_doc_b@2x.png" alt="">
<span>{{item.name}}</span>
<span>{{item.size | formatSize}}</span>
<van-icon name="delete" @click="delBtn(index)" class="delte"/>
</div>
<van-uploader v-show="uploadDocList.length < 2" preview-size="80px" accept=".doc, .docx, .xml, .xlsx, .pdf" :before-read="beforeRead" :after-read="afterRead"></van-uploader>
</div>
<div v-if="columnName === '音頻'">
<div class="forPreview_audio" v-for="(item, index) in uploadAudioList" :key="index">
<img src="../../assets/img/resource_audio@2x.png" alt="">
<span>{{item.name}}</span>
<span>{{item.size | formatSize}}</span>
<van-icon name="delete" @click="delBtn(index)" class="delte"/>
</div>
<van-uploader v-show="uploadAudioList.length < 2" preview-size="80px" accept="audio/*" :before-read="beforeRead" :after-read="afterRead"></van-uploader>
</div>
<div v-if="columnName === '圖片'">
<div class="forPreview_pic" v-for="(item, index) in uploadPicList" :key="index">
<img :src="picSrc" alt="">
<van-icon name="delete" @click="delBtn(index)" class="delte"/>
</div>
<van-uploader v-show="uploadPicList.length < 2" accept="image/*" preview-size="80px" :before-read="beforeRead" :after-read="afterRead"></van-uploader>
</div>
<div class="diy-submit">
<van-button @click="doSubmit($event)">提交</van-button>
</div>
</div>
</div>
</template>
上述html代碼是在同一頁面根據前一頁面?zhèn)骰氐腸olumnName的值來判斷需要上傳哪種類型文件。
<script>
import VHeader from '../../common/header'
import {classifyList, uploadFile, addResources} from '../../http/mock'
import Toast from 'vant'
export default {
name: "uploadFile",
components: {
VHeader
},
data(){
return{
tagList: [],
uploadTitle: '',
currentTag: null,
tagId: null,
columnName: localStorage.getItem('columnName'),
fileIdArr: [],
uploadVideoList: [], // 選中的上傳視頻列表
videoSrc: '', // 選中的視頻的src，用來顯示視頻
uploadDocList: [], // 選中的上傳文檔列表
uploadAudioList: [], // 選中的上傳音頻列表
uploadPicList: [], // 選中的上傳圖片列表
picSrc: '', // 選中的圖片的src，用來顯示圖片縮略圖
}
},
filters: {
formatSize(val) { // 格式化文件大小
if (val > 0) {
return (val / 1024 / 1024).toFixed(2) + 'M';
} else {
return '0M';
}
},
},
methods: {
// vant上傳文件前校驗文件事件
// 文件選中后先提交給后臺，后臺根據選中的文件，返回數組（這一業(yè)務根據后臺而定）
beforeRead(file){
let formData = new FormData(); // 為上傳文件定義一個formData對象
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
let uploadUrl = URL.createObjectURL(file); // 將選中的上傳文件轉化為二進制文件，顯示在頁面上
if(this.columnName === '視頻'){
this.uploadVideoList.push(file);
this.videoSrc = uploadUrl;
// 這里使用foreach是為了將選中的多個文件都添加進定義的formdata變量中
this.uploadVideoList.forEach(item => {
formData.append(item.name, item)
})
}else if(this.columnName === '文檔'){
this.uploadDocList.push(file);
this.uploadDocList.forEach(item => {
formData.append(item.name, item)
})
}else if(this.columnName === '音頻'){
this.uploadAudioList.push(file);
this.uploadAudioList.forEach(item => {
formData.append(item.name, item)
})
}else if(this.columnName === '圖片'){
this.uploadPicList.push(file);
this.picSrc = uploadUrl;
this.uploadPicList.forEach(item => {
formData.append(item.name, item)
})
}
// formData.append(file.name, file); // 單個文件上傳時可以這么寫，上面的foreach就可以刪掉
this.$api.post(uploadFile, formData, config).then(res => {
this.fileIdArr = res.data.data; // 把選中的文件傳送給後臺
}).catch(err => {
Toast('文件上傳失??！')
})
},
// 刪除待上傳的文件
delBtn(index){
if(this.columnName === '視頻'){
// 先判斷當前的選中的索引是否是在有效范圍中，如果不是則跳出方法
if(isNaN(index) || index >= this.uploadVideoList.length){
return false;
}
let tmp = [];
// 將沒被選中的上傳文件存放進一個臨時數組中
for(let i = 0; i < this.uploadVideoList.length; i++){
if(this.uploadVideoList[i] !== this.uploadVideoList[index]){
tmp.push(this.uploadVideoList[i]);
}
}
// 存放當前未被選中的上傳文件
this.uploadVideoList = tmp;
}
if(this.columnName === '文檔'){
console.log(this.uploadDocList.length)
if(isNaN(index) || index >= this.uploadDocList.length){
return false;
}
let tmp = [];
for(let i = 0; i < this.uploadDocList.length; i++){
if(this.uploadDocList[i] !== this.uploadDocList[index]){
tmp.push(this.uploadDocList[i]);
}
}
this.uploadDocList = tmp;
}
if(this.columnName === '音頻'){
if(isNaN(index) || index >= this.uploadAudioList.length){
return false;
}
let tmp = [];
for(let i = 0; i < this.uploadAudioList.length; i++){
if(this.uploadAudioList[i] !== this.uploadAudioList[index]){
tmp.push(this.uploadAudioList[i]);
}
}
this.uploadAudioList = tmp;
}
if(this.columnName === '圖片'){
if(isNaN(index) || index >= this.uploadPicList.length){
return false;
}
console.log('uuu')
let tmp = [];
for(let i = 0; i < this.uploadPicList.length; i++){
if(this.uploadPicList[i] !== this.uploadPicList[index]){
tmp.push(this.uploadPicList[i]);
}
}
this.uploadPicList = tmp;
}
},
doSubmit(){
let params = {
classify: this.tagId, // 針對視頻資源時對應的分類id
file: this.fileIdArr, // 選擇完文件后，調用uploadFile這個接口，后端返回的數組
resourceColumnId: JSON.parse(localStorage.getItem('columnId')), // 資源欄目id(視頻、圖片、音頻、文檔)
title: this.uploadTitle // 上傳時填寫的標題
};
let columnName = localStorage.getItem('columnName')
this.$api.post(addResources, params).then(res => {
if(res.data.code === 1001){
if(columnName === '視頻'){
this.$router.push({name: 'myVideo'});
}else {
this.$router.push({name: 'myResourceClassify'});
}
}
}).catch(err => {
console.log(err)
})
},
},
mounted(){
this.getClassifyList();
}
}
</script>
<style lang="less" scoped>
.upload{
padding: 140px 36px 160px 36px;
box-sizing: border-box;
}
.forPreview_video{
position: relative;
/*background: rgba(0,0,0,.7);*/
video{
width: 95%;
max-height: 430px;
}
.delte{
position: absolute;
right: 0;
bottom: 0;
}
}
.forPreview_doc, .forPreview_audio{
display: flex;
margin-bottom: 10px;
align-items: center;
img{
width: 56px;
height: 56px;
margin-right: 20px;
}
span:nth-of-type(1){
flex: 1;
}
span:nth-of-type(2){
margin-right: 20px;
}
}
.forPreview_pic{
display: flex;
align-items: flex-end;
img{
width: 160px;
height: 160px;
}
}
.diy-detail{
width: 100%;
overflow: hidden;
.btn{
span{
margin-bottom: 10px;
}
}
.van-cell{
background-color: #F0F0F0;
border-radius: 35px;
font-size: 26px;
height: 69px;
line-height: 69px;
padding: 0 22px;
color: #999;
}
.van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
border-width: 0;
}
p{
height: 64px;
line-height: 64px;
font-size: 32px;
color: #333;
position: relative;
padding-left: 16px;
}
p::before{
position: absolute;
top: 0;
left: 0;
content: '*';
color: #FF0000;
}
span{
display: inline-block;
width: 157px;
background: #F0F0F0;
border-radius: 35px;
color: #999;
font-size: 26px;
padding: 14px 18px;
margin-right: 28px;
text-align: center;
}
.active{
color: #fff;
background: linear-gradient(to right,#FD5130,#FA6C34);
}
}
.diy-submit {
position: fixed;
height: 150px;
width: 90%;
bottom: 0;
background: #fff;
.van-button {
width: 100%;
height: 90px;
border-radius: 45px;
font-size: 36px;
color: #fff;
background: linear-gradient(to right, #FD5130, #FA6C34);
top: 50%;
transform: translate(0, -50%);
}
.van-button--default {
border: none;
}
}
</style>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
watch就是當值第一次綁定的時候，是不會執(zhí)行監(jiān)聽函數的，只有值誕生改變才會執(zhí)行。如果需要在第一次綁定的時候也執(zhí)行函數，則需要用到immediate屬性，比如當父組件向子組件動態(tài)傳值時，子組件props首次獲取到父組件傳來的No認知時，也需要執(zhí)行函數2023-01-01
Vue.nextTick是Vue官方給我們提供的一個API（方法），作用是在下次DOM更新循環(huán)結束之后執(zhí)行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的DOM2021-04-04
這篇文章主要為大家介紹了極度舒適的Vue彈窗Dialog最佳使用方案實戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要為大家詳細介紹了vue實現小球滑動交叉，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue-cli3.0 特性解讀,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue如何使用mapbox對當前行政區(qū)劃進行反選遮罩
這篇文章主要介紹了vue如何使用mapbox對當前行政區(qū)劃進行反選遮罩問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解基于Vue2.0實現的移動端彈窗(Alert, Confirm, Toast)組件
這篇文章主要介紹了詳解基于Vue2.0實現的移動端彈窗(Alert, Confirm, Toast)組件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了vue前端性能優(yōu)化之預加載和懶加載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
本篇文章主要介紹了vue-loader教程介紹，vue-loader就是告訴webpack如何將vue格式的文件轉換成js。有興趣的可以了解一下2017-06-06
公司業(yè)務新開了一個商家管理微信H5移動端項目，日歷控件是商家管理員查看通過日程來篩選獲取某日用戶的訂單等數據。下面小編給大家?guī)砹嘶趘ue實現一個炫酷的日歷組件，感興趣的朋友參考下吧2018-10-10