| | |
| | | :show-file-list="false" |
| | | :headers="headers" |
| | | class="upload-file-uploader" |
| | | ref="upload" |
| | | ref="fileUpload" |
| | | > |
| | | <!-- 上传按钮 --> |
| | | <el-button size="mini" type="primary">选取文件</el-button> |
| | |
| | | number: 0, |
| | | uploadList: [], |
| | | baseUrl: process.env.VUE_APP_BASE_API, |
| | | uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 |
| | | uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址 |
| | | headers: { |
| | | Authorization: "Bearer " + getToken(), |
| | | }, |
| | |
| | | handleBeforeUpload(file) { |
| | | // 校检文件类型 |
| | | if (this.fileType) { |
| | | let fileExtension = ""; |
| | | if (file.name.lastIndexOf(".") > -1) { |
| | | fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); |
| | | } |
| | | const isTypeOk = this.fileType.some((type) => { |
| | | if (file.type.indexOf(type) > -1) return true; |
| | | if (fileExtension && fileExtension.indexOf(type) > -1) return true; |
| | | return false; |
| | | }); |
| | | const fileName = file.name.split('.'); |
| | | const fileExt = fileName[fileName.length - 1]; |
| | | const isTypeOk = this.fileType.indexOf(fileExt) >= 0; |
| | | if (!isTypeOk) { |
| | | this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`); |
| | | return false; |
| | |
| | | }, |
| | | // 上传失败 |
| | | handleUploadError(err) { |
| | | this.$modal.msgError("上传图片失败,请重试"); |
| | | this.$modal.closeLoading() |
| | | this.$modal.msgError("上传文件失败,请重试"); |
| | | this.$modal.closeLoading(); |
| | | }, |
| | | // 上传成功回调 |
| | | handleUploadSuccess(res) { |
| | | this.uploadList.push({ name: res.fileName, url: res.fileName }); |
| | | if (this.uploadList.length === this.number) { |
| | | this.fileList = this.fileList.concat(this.uploadList); |
| | | this.uploadList = []; |
| | | this.number = 0; |
| | | this.$emit("input", this.listToString(this.fileList)); |
| | | handleUploadSuccess(res, file) { |
| | | if (res.code === 200) { |
| | | this.uploadList.push({ name: res.fileName, url: res.fileName }); |
| | | this.uploadedSuccessfully(); |
| | | } else { |
| | | this.number--; |
| | | this.$modal.closeLoading(); |
| | | this.$modal.msgError(res.msg); |
| | | this.$refs.fileUpload.handleRemove(file); |
| | | this.uploadedSuccessfully(); |
| | | } |
| | | }, |
| | | // 删除文件 |
| | |
| | | this.fileList.splice(index, 1); |
| | | this.$emit("input", this.listToString(this.fileList)); |
| | | }, |
| | | // 上传结束处理 |
| | | uploadedSuccessfully() { |
| | | if (this.number > 0 && this.uploadList.length === this.number) { |
| | | this.fileList = this.fileList.concat(this.uploadList); |
| | | this.uploadList = []; |
| | | this.number = 0; |
| | | this.$emit("input", this.listToString(this.fileList)); |
| | | this.$modal.closeLoading(); |
| | | } |
| | | }, |
| | | // 获取文件名称 |
| | | getFileName(name) { |
| | | // 如果是url那么取最后的名字 如果不是直接返回 |
| | | if (name.lastIndexOf("/") > -1) { |
| | | return name.slice(name.lastIndexOf("/") + 1); |
| | | } else { |
| | | return ""; |
| | | return name; |
| | | } |
| | | }, |
| | | // 对象转成指定字符串分隔 |