有没有小伙伴在使用ant-design-vue的upload组件时，发现api文档在图片预览功能的介绍寥寥无几，而且也没提供视频预览的demo，在实际开发中碰到相应的需求直挠头~~~~，别急，下面来给大家分享一个我自己封装的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,//是否创建文件占位dom
headers:{},
fileList: [],
previewSrc:'',
previewVisible:false,
}
},
props:{
text:{
type:String,
required:false,
default:"点击上传"
},
fileType:{
type:String,
required:false,
default:FILE_TYPE_ALL
},
/*这个属性用于控制文件上传的业务路径*/
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>最后要注意的地方：
文章来源：https://www.toymoban.com/news/detail-523204.html
如果需要多次上传，记得在重置组件文件列表，不然会有缓存文章来源地址https://www.toymoban.com/news/detail-523204.html
到了这里，关于ant-design-vue中upload上传图片、视频实现预览功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
