<template>
<div class="single-file-uploader-item">
<el-upload
:action="action"
:accept="accept"
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList"
:before-remove="beforeRemove"
:data="{
fileType: fileType
}"
:on-success="handleSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip" style="line-height:1em;">
{{ tip }}
</div>
</el-upload>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
fileList: this.value ? [{ name: this.value, url: this.value }] : []
};
},
props: {
value: {
type: String,
default: ''
},
field: {
type: String,
default: 'file'
},
action: {
type: String,
default: '/api/file/upload-one'
},
fileType: {
type: String,
required: true
},
otherId: {
type: String,
default: ''
},
tip: {
type: String,
default: ''
},
accept: {
type: String,
default: 'image/jpeg, image/png, video/mp4'
}
},
methods: {
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件，本次选择了 ${
files.length
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
);
},
handleSuccess(response, file, fileList) {
this.$emit('input', response.data.fileUrls[0]);
}
},
watch: {
value(newVal) {
this.fileList = [{ name: newVal, url: newVal }];
}
}
};
</script>
应用
<el-form-item
label="活动介绍视频"
prop="activityInfo.explainUrl_video"
v-if="form.activityInfo.mediaType == 'VIDEO'"
>
<SingleFileUploader
v-model="form.activityInfo.explainUrl_video"
fileType="INFORMATION"
accept="video/mp4"
tip="只能上传mp4文件"
></SingleFileUploader>
</el-form-item>
<el-form-item
label="视频封面图片"
prop="activityInfo.coverUrl"
v-if="form.activityInfo.mediaType == 'VIDEO'"
>
<SingleImgUploader
v-model="form.activityInfo.coverUrl"
fileType="INFORMATION"
></SingleImgUploader>
</el-form-item>
