valuePropName : 'fileList' , getValueFromEvent : normFile , rules : [ { required : true , message : '请上传商品视频！' } ] name = "file" : action = "action" : headers = "uploadHeaders" : accept = "'video/mp4'" list - type = "picture-card" @change = "videoUploadChange" : before - upload = "videoBeforeUpload" : preview - file = "previewVideoFile" @preview = "videoPreview" < a - icon type = "plus" / > < div class = "ant-upload-text" > Upload < / div > < / div > < a - modal : visible = "videoPreviewVisible" : footer = "null" @cancel = "videoPreviewCancel" > < video width = "100%" height = "600px;" controls = "controls" id = "video" > 您的浏览器不支持播放该视频！ < / video > < / a - modal > < / a - upload > < / a - form - item > < / form >

<script>
	import {getAuthorization} from '@/utils/cookieUtil'
	export default {
		watch: {
			//预览并播放视频时,如果关闭了弹框,电脑还有视频的声音,监听视频预览的弹框的打开/关闭,如果关闭了弹框就让video不要播放了
            videoPreviewVisible: function (val) {
                if(val === false){
                    const video = document.getElementById('video')
                    video.pause()
		data() {
			uploadHeaders: {Authorization: getAuthorization()},		//这里是从cookie中取token值,后台鉴权用的
            action:  process.env.VUE_APP_API_BASE_URL+'/upload/oss',
            videoPreviewVisible: false,
		 methods: {
		 	 normFile(e) {
		 	 	//本方法作用,因为我的业务是只能上传一个视频,因此每次上传时只保留uoload组件的fileList字段的最后一个值作为提交给后台的数据
                if (Array.isArray(e)) {
                    return e;
                if(e && e.fileList){
                    //截取最后一个元素,返回只包含最后一个元素的数组
                    let fileList = e.fileList.slice(-1);
                    fileList = fileList.map(file => {
                        if (file.response) {
                        // Component will show file.url as link
                        file.url = file.response.data;	//file.response.data是后台返回的当前视频上传成功后入库的url
                    return file;
                });
                    e.fileList = fileList
                return e && e.fileList;
             videoUploadChange({file, fileList  }) {
                if(file.status === 'error'){
                    fileList.pop()
                    this.$message.error("上传失败!")
 			videoBeforeUpload(file) {
                const isLt10M = file.size / 1024 / 1024 < 10;
                if (!isLt10M) {
                    this.$message.error('视频大小不能超过10M!');
                return isLt10M
			videoPreview(file){
				//预览视频的方法
                this.videoPreviewVisible = true;
                this.$nextTick(() => {	//这里一定要使用nextTick,否则document将找不到id为video的节点,因为modal框初始为隐藏状态,<video id='video'>标签初始在dom树中并不存在
                    const video = document.getElementById('video')
                    video.src = file.url
                });
            videoPreviewCancel(){
                this.videoPreviewVisible = false
</script>
最终效果,点击上传后的视频有个小眼睛的图标,在弹框中可以预览视频
 
                    antd vue upload组件上传视频并实现视频预览html代码	&lt;form&gt;		&lt;a-form-item              	label="商品视频"              	:labelCol="{span: 4}"              	:wrapperCol="{span: 18}"              	&gt;                   &lt;a-upload                           v-de
				
关于antd上传视频无法预览提供一种思路
使用upload上传视频时，预览按钮是灰色的无法点击，并且没有缩略图，我这边的解决方法是，自定义一个预览，点击预览时，直接跳转到另一个页面，缩率图可以使用一张网图从网上或者是直接存储在服务器上的。
handlePreviewFile(file) {
return new Promise((resolve) => {
const reader = ne...
第一步：安装ali-oss
第二步：配置相关参数（建立一个oss.js，模块化）
相关oss配置项地址：https://help.aliyun.com/document_detail/64095.html第三步：API封装接口，引入配置文件
第四步：ant的a-upload组件...
当成功时返回上传到oss的路径,以及文件的类型
首先需要一个上传文件的组件a-upload，一个进度条, 在beforeUpload中对文件进行文件类型的检测,在customRequest上传文件到阿里云 oss
## 1.beforeUpload对文件类型进
1. 禁用Ant Design Vue组件库的上传组件。
您可以将Ant Design Vue的上传组件禁用，以防止用户上传组件。您可以在Ant Design Vue的官方文档中查找有关如何禁用组件的详细信息。
2. 检查上传的文件类型和大小。
您可以通过检查上传文件的类型和大小来确保用户上传的内容是安全的。在上传之前，您可以检查文件扩展名和MIME类型。您还可以限制上传的文件大小，以确保您的服务器不会受到过大的文件的影响。
3. 实施权限控制。
您可以通过实施权限控制来确保只有受信任的用户才能上传组件。您可以在Ant Design Vue的官方文档中了解如何实施权限控制的详细信息。
希望这些信息可以对您有所帮助！