有沒有小伙伴在使用ant-design-vue的upload組件時，發(fā)現(xiàn)api文檔在圖片預覽功能的介紹寥寥無幾，而且也沒提供視頻預覽的demo，在實際開發(fā)中碰到相應的需求直撓頭~~~~，別急，下面來給大家分享一個我自己封裝的upload組件，符合需求可以直接在項目中放到組件目錄調用。
template部分代碼：
?
<template>
<div>
<a-upload
name="file"
:multiple="true"
:action="uploadAction"
list-type="picture-card"
:headers="headers"
:data="{'isup':1,'bizPath':bizPath}"
:fileList="fileList"
:beforeUpload="beforeUpload"
@preview="handlePreview"
@change="handleChange"
:disabled="disabled">
<div v-if="fileList.length < 8">
<a-icon type="plus" />
<div class="ant-upload-text">
上傳
</div>
</div>
</a-upload>
<a-modal v-if="fileType == 'image'" :visible="previewVisible" width="1400px" :footer="null" @cancel="handleImgCancel">
<img alt="example" style="width: 100%" :src="previewSrc" />
</a-modal>
<a-modal v-if="fileType == 'video/mp4'" :visible="previewVisible" :footer="null" @cancel="handleVideoCancel">
<video alt="example" style="width: 100%" :src="previewSrc" controls>
</video>
</a-modal>
</div>
</template>script部分代碼：
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
const FILE_TYPE_ALL = "all"
const FILE_TYPE_IMG = "image"
const FILE_TYPE_MP4 = "video/mp4"
const FILE_TYPE_TXT = "file"
const uidGenerator=()=>{
return '-'+parseInt(Math.random()*10000+1,10);
}
const getFileName=(path)=>{
if(path.lastIndexOf("\\")>=0){
let reg=new RegExp("\\\\","g");
path = path.replace(reg,"/");
}
return path.substring(path.lastIndexOf("/")+1);
}
export default {
name: 'JUpload',
data(){
return {
uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",//圖片上傳地址
imgErver: window._CONFIG['domianURL'] + '/sys/common/view',//圖片預覽地址
videoErver: window._CONFIG['domianURL'] + 'sys/common/view_video',//視頻預覽地址
isCreatFile:true,//是否創(chuàng)建文件占位dom
headers:{},
fileList: [],
previewSrc:'',
previewVisible:false,
}
},
props:{
text:{
type:String,
required:false,
default:"點擊上傳"
},
fileType:{
type:String,
required:false,
default:FILE_TYPE_ALL
},
/*這個屬性用于控制文件上傳的業(yè)務路徑*/
bizPath:{
type:String,
required:false,
default:"temp"
},
value:{
type:[String,Array],
required:false
},
// update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload組件增加是否能夠點擊
disabled:{
type:Boolean,
required:false,
default: false
},
},
watch:{
value(val){
console.log(val)
if (val instanceof Array) {
this.initFileList(val.join(','))
} else {
this.initFileList(val)
}
}
},
created(){
const token = Vue.ls.get(ACCESS_TOKEN);
this.headers = {"X-Access-Token":token}
},
methods:{
initFileList(paths){
if(!paths || paths.length==0){
//return [];
// update-begin- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload組件初始化bug
this.fileList = [];
return;
// update-end- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload組件初始化bug
}
let fileList = [];
let arr = paths.split(",")
for(var a=0;a<arr.length;a++){
fileList.push({
uid:uidGenerator(),
name:getFileName(arr[a]),
status: 'done',
url: this.urlDownload+arr[a],
response:{
status:"history",
message:arr[a]
}
})
}
this.fileList = fileList
},
handlePathChange(){
let uploadFiles = this.fileList
let path = ''
if(!uploadFiles || uploadFiles.length==0){
path = ''
}
let arr = [];
for(var a=0;a<uploadFiles.length;a++){
if(uploadFiles[a].response){
arr.push(uploadFiles[a].response.message)
}
}
if(arr.length>0){
path = arr.join(",")
}
this.$emit('change', path);
},
beforeUpload(file){//上傳文件前對文件類型判斷
var fileType = file.type;
if(this.fileType === FILE_TYPE_ALL){
this.isCreatFile = true;
return true;
}
else if(fileType === this.fileType){
this.isCreatFile = true;
return true;
}
else{
if(this.fileType === FILE_TYPE_IMG){
if(fileType.indexOf('image')<0){
this.$message.warning('請上傳圖片');
this.isCreatFile = false;
return false;
}
}else if(this.fileType === FILE_TYPE_TXT){
if(fileType.indexOf('image')>=0){
this.$message.warning('請上傳文件');
this.isCreatFile = false;
return false;
}
}
else if(this.fileType === FILE_TYPE_MP4){
if(fileType.indexOf('mp4')<0){
this.$message.warning('請上傳mp4文件');
this.isCreatFile = false;
return false;
}
}
}
//TODO 擴展功能驗證文件大小
},
handleChange(info) {
if(this.isCreatFile == false){
return false
}
let fileList = info.fileList
if(info.file.status==='done'){
if(info.file.response.success){
fileList = fileList.map((file) => {
if (file.response) {
file.url = this.urlDownload+file.response.message;
}
return file;
});
}
this.$message.success(`${info.file.name} 上傳成功!`);
}else if (info.file.status === 'error') {
this.$message.error(`${info.file.name} 上傳失敗.`);
}else if(info.file.status === 'removed'){
this.handleDelete(info.file)
}
this.fileList = fileList
if(info.file.status==='done' || info.file.status === 'removed'){
this.handlePathChange()
}
},
handleImgCancel() {
this.previewVisible = false;
},
handleVideoCancel(){
this.previewVisible = false;
let myVideo = document.getElementsByTagName('video');
let arr = Array.from(myVideo)
arr.forEach(item =>{//關閉時暫停播放
item.pause()
})
},
async handlePreview(file) {//判斷打開不同文件預覽窗口
if(this.fileType == 'image'){
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
this.previewSrc = file.url || file.preview;
this.previewVisible = true;
}
if(this.fileType == 'video/mp4'){
this.previewSrc = this.imgErver + '/' + file.response.message;
this.previewVisible = true;
}
},
handleDelete(file){
//如有需要新增 刪除邏輯
console.log(file)
},
},
model: {
prop: 'value',
event: 'change'
}
}
</script>好人做到底，組件調用也貼上：
<JUpload @change="saveImageUrl" ref="imgUpload" :fileType="'image'" :value="savedImageList"></JUpload>最后要注意的地方：
文章來源：http://www.zghlxwxcb.cn/news/detail-523204.html
?如果需要多次上傳，記得在重置組件文件列表，不然會有緩存文章來源地址http://www.zghlxwxcb.cn/news/detail-523204.html
到了這里，關于ant-design-vue中upload上傳圖片、視頻實現(xiàn)預覽功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
