| | |
| | | <div class="upload-file"> |
| | | <el-upload |
| | | multiple |
| | | :accept="acceptList" |
| | | :action="uploadFileUrl" |
| | | :before-upload="handleBeforeUpload" |
| | | :file-list="fileList" |
| | |
| | | ref="fileUpload" |
| | | > |
| | | <!-- 上传按钮 --> |
| | | <el-button size="mini" type="primary">选取文件</el-button> |
| | | <el-button icon="el-icon-upload2" size="small" type="primary">上传</el-button> |
| | | <!-- 上传提示 --> |
| | | <div class="el-upload__tip" slot="tip" v-if="showTip"> |
| | | 请上传 |
| | |
| | | // 大小限制(MB) |
| | | fileSize: { |
| | | type: Number, |
| | | default: 5, |
| | | default: 20, |
| | | }, |
| | | // 文件类型, 例如['png', 'jpg', 'jpeg'] |
| | | fileType: { |
| | |
| | | showTip() { |
| | | return this.isShowTip && (this.fileType || this.fileSize); |
| | | }, |
| | | acceptList () { |
| | | let temp = '.*' |
| | | temp = this.fileType.map(item => '.' + item).join(',') |
| | | return temp |
| | | } |
| | | }, |
| | | methods: { |
| | | // 上传前校检格式和大小 |
| | |
| | | const fileExt = fileName[fileName.length - 1]; |
| | | const isTypeOk = this.fileType.indexOf(fileExt) >= 0; |
| | | if (!isTypeOk) { |
| | | this.$modal.msgError(`文件格式不正确,请上传${this.fileType.join("/")}格式文件!`); |
| | | this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`); |
| | | return false; |
| | | } |
| | | } |
| | | // 校检文件名是否包含特殊字符 |
| | | if (file.name.includes(',')) { |
| | | this.$modal.msgError('文件名不正确,不能包含英文逗号!'); |
| | | return false; |
| | | } |
| | | // 校检文件大小 |
| | | if (this.fileSize) { |
| | |
| | | // 上传成功回调 |
| | | handleUploadSuccess(res, file) { |
| | | if (res.code === 200) { |
| | | this.uploadList.push({ name: res.fileName, url: res.fileName }); |
| | | this.uploadList.push({ name: res.newFileName, originalName: res.originalFilename , url: res.fileName }); |
| | | this.uploadedSuccessfully(); |
| | | } else { |
| | | this.number--; |
| | |
| | | // 删除文件 |
| | | handleDelete(index) { |
| | | this.fileList.splice(index, 1); |
| | | this.$emit("input", this.listToString(this.fileList)); |
| | | // this.$emit("input", this.listToString(this.fileList)); |
| | | //修改为返回数组 |
| | | this.$emit("input", this.fileList); |
| | | }, |
| | | // 上传结束处理 |
| | | uploadedSuccessfully() { |
| | |
| | | this.fileList = this.fileList.concat(this.uploadList); |
| | | this.uploadList = []; |
| | | this.number = 0; |
| | | this.$emit("input", this.listToString(this.fileList)); |
| | | // this.$emit("input", this.listToString(this.fileList)); |
| | | //修改为返回数组 |
| | | this.$emit("input", this.fileList); |
| | | this.$modal.closeLoading(); |
| | | } |
| | | }, |