一、直接上代码

<template><!-- 普通附件上传一个（加额外参数index） --><!-- 话题上传附件 --><!-- dataParams: {fileType: "",projectId: "",moduleId: "",topicId: "",}, --><!-- :disabled="uploadDisabled" --><el-uploadclass="upload-demo":action="actionUrl":on-remove="attachRemove":before-remove="attachBeforeRemove":multiple="false":on-progress="attachProgress":on-error="attachError":before-upload="handleBeforeUpload":on-success="attachUploadSuccess":on-preview="attachPreview":headers="headers":file-list="fileDataList":data="dataParams":disabled="uploadDisabled"><el-buttonsize="small"type="primary"plain:disabled="uploadDisabled"icon="el-icon-upload">{{ uploadDisabled ? '上传中...' : '+ 上传附件' }}<!-- {{ '上传附件' }} --></el-button></el-upload>
</template><script>
import { mapState } from 'vuex';
export default {name: 'uploadComponentIndex',props: {attachFileList: {type: Array,default() {return [];},},// 索引 ----根据index删除指定的附件index: {type: Number,default: 0,},// 话题idtalkId: {type: String,default: '',},fileType: {type: String,default: '',},// 是新增还是编辑话题type: {type: String,default: '',},},data() {return {uploadDisabled: false,fileDataList: [],dataParams: {},};},computed: {actionUrl() {return process.env.VUE_APP_WEB_API + '/url';},headers() {return { token: this.$store.state.token };},...mapState(['projectModule']),},watch: {attachFileList: {//监听的对象deep: true, //深度监听设置为 trueimmediate: true,handler: function (newV, oldV) {this.fileDataList = newV;},},// 话题编辑和新增的时候用到type: {deep: true, //深度监听设置为 trueimmediate: true,handler: function (newV, oldV) {console.log(newV, 'warch--上传监听是add还是edit');if (newV == 'editKnow') {// 知识库编辑上传附件时候this.dataParams = {fileType: this.fileType,// projectId: this.projectModule.projectId,// moduleId: this.projectModule.moduleId,topicId: this.talkId,};} else {this.dataParams = {fileType: this.fileType,projectId: this.projectModule.projectId,moduleId: this.projectModule.moduleId,topicId: this.talkId,};}},},},methods: {attachProgress() {this.uploadDisabled = true;},attachError(err, file, fileList) {//上传失败code!=200的时候也不会执行这个函数，我也不知道为什么this.uploadDisabled = false;},attachRemove(file) {if (file && file.status === 'success') {//移除方法this.$emit('DialogDeleteId', {...file,fileType: this.fileType,index: this.index,});}},attachBeforeRemove(file, fileList) {if (file && file.status === 'success') {//移除方法return this.$confirm(`确定移除 ${file.name}？`);}},attachUploadSuccess(response, file, fileList) {this.uploadDisabled = false;//res.code!=200的时候也会执行上次成功函数this.fileDataList.push({id: response.data[0].id,name: response.data[0].fileName,url: response.data[0].url,});this.$emit('DialogOk', {fileData: this.fileDataList,fileType: this.fileType,index: this.index,});},handleBeforeUpload(file) {//录音：WAV，MP3，AAC，FLAC，OGG  ====// 视频：MP4，AVI，MOV，WMV，WEBM,FLV，MKV ====mkv不支持// 检测文件类型console.log(file.type, this.fileType, '上传类型');let isFileType;if (this.fileType == 3) {isFileType = ['audio/mpeg','audio/wav','audio/aac','audio/flac','audio/ogg',].includes(file.type);if (!isFileType)this.$message({message: '上传格式仅支持mp3,wav,aac,flac,ogg!',type: 'error',showClose: true,offset: 80,});return isFileType;} else if (this.fileType == 4) {isFileType = ['image/jpeg', 'image/png', 'image/jpg', 'image/svg+xml'].includes(file.type);if (!isFileType)this.$message({message: '上传格式仅支持jpeg,png,jpg,svg!',type: 'error',showClose: true,offset: 80,});return isFileType;} else if (this.fileType == 5) {isFileType = ['video/mp4', 'video/quicktime', 'video/webm'].includes(file.type);if (!isFileType)this.$message({message: '上传格式仅支持mp4,mov,webm!',type: 'error',showClose: true,offset: 80,});return isFileType;} else {isFileType = ['application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/msword','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','application/vnd.ms-excel','text/csv','application/vnd.openxmlformats-officedocument.presentationml.presentation','application/vnd.ms-powerpoint','application/pdf',].includes(file.type);if (!isFileType)this.$message({message: '上传格式仅支持.docx,.doc,.xlsx,.xls,.csv,.ppt,.pptx,.pdf!',type: 'error',showClose: true,offset: 80,});return isFileType;} },attachPreview(file) {this.$emit('DialogPreview', {index: this.index,fileType: this.fileType,...file,});return false;// let newFile = file.url.split('/')// let header = newFile[0] + '//' + newFile[2] + '/'// let end = file.url.slice(header.length)// window.open(header + encodeURIComponent(end), '_blank')},},
};
</script><style lang="scss"></style>

没有了~~~~