123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- <template>
- <div class="upload-file">
- <el-upload
- drag
- multiple
- :action="uploadFileUrl"
- :before-upload="handleBeforeUpload"
- :file-list="fileList"
- :limit="limit"
- :on-error="handleUploadError"
- :on-exceed="handleExceed"
- :on-success="handleUploadSuccess"
- :show-file-list="false"
- :headers="headers"
- class="upload-file-uploader"
- ref="fileUpload"
- >
- <!-- 上传按钮 -->
- <!-- <el-button size="mini" type="primary">选取文件</el-button> -->
- <i class="el-icon-upload"></i>
- <div class="el-upload__text">
- 将文件拖到此处,或
- <em>点击上传</em>
- </div>
- <!-- 上传提示 -->
- <div class="el-upload__tip" slot="tip" v-if="showTip">
- 请上传
- <template v-if="fileSize">
- 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
- </template>
- <template v-if="fileType">
- 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
- </template>
- 的文件
- </div>
- </el-upload>
- <!-- 文件列表 -->
- <transition-group
- class="upload-file-list el-upload-list el-upload-list--text"
- name="el-fade-in-linear"
- tag="ul"
- >
- <li
- :key="file.url"
- class="el-upload-list__item ele-upload-list__item-content"
- v-for="(file, index) in fileList"
- >
- <el-link
- :href="`${baseUrl}?id=${file.id}`"
- :underline="false"
- target="_blank"
- >
- <!-- <span class="el-icon-document"> {{ getFileName(file.name) }} </span> -->
- <span class="el-icon-document"> {{ file.name }} </span>
- </el-link>
- <div class="ele-upload-list__item-content-action">
- <el-link :underline="false" @click="handleDelete(index)" type="danger"
- >删除</el-link
- >
- </div>
- </li>
- </transition-group>
- </div>
- </template>
- <script>
- import { getToken } from "@/utils/auth";
- export default {
- name: "FileUpload",
- props: {
- // 值
- value: [String, Object, Array],
- // 数量限制
- limit: {
- type: Number,
- default: 5,
- },
- // 大小限制(MB)
- fileSize: {
- type: Number,
- default: 5,
- },
- // 文件类型, 例如['png', 'jpg', 'jpeg']
- fileType: {
- type: Array,
- default: () => ["doc", "xls", "ppt", "txt", "pdf"],
- },
- // 是否显示提示
- isShowTip: {
- type: Boolean,
- default: true,
- },
- },
- data() {
- return {
- number: 0,
- separator: ";",
- uploadList: [],
- baseUrl: "https://sy.derom.com/document-center/fastdfs/download",
- uploadFileUrl:
- process.env.NODE_ENV == "development"
- ? "/document-center/fastdfs/upload"
- : "/drp-file/document-center/fastdfs/upload",
- headers: {
- Authorization: "Bearer " + getToken(),
- },
- fileList: [],
- };
- },
- watch: {
- value: {
- handler(val) {
- if (val) {
- let temp = 1;
- // 首先将值转为数组
- const list = Array.isArray(val)
- ? val
- : this.value.split(this.separator);
- // 然后将数组转为对象数组
- // this.fileList = list.map((item) => {
- // if (typeof item === "string") {
- // item = { name: item, url: item };
- // }
- // item.uid = item.uid || new Date().getTime() + temp++;
- // return item;
- // });
- this.fileList = list.map((item) => {
- item = JSON.parse(item);
- console.log({
- ...item,
- uid: item.uid || new Date().getTime() + temp++,
- });
- return {
- ...item,
- uid: item.uid || new Date().getTime() + temp++,
- };
- });
- } else {
- this.fileList = [];
- return [];
- }
- },
- deep: true,
- immediate: true,
- },
- },
- computed: {
- // 是否显示提示
- showTip() {
- return this.isShowTip && (this.fileType || this.fileSize);
- },
- },
- methods: {
- // 上传前校检格式和大小
- handleBeforeUpload(file) {
- // 校检文件类型
- if (this.fileType) {
- 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;
- }
- }
- // 校检文件大小
- if (this.fileSize) {
- const isLt = file.size / 1024 / 1024 < this.fileSize;
- if (!isLt) {
- this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
- return false;
- }
- }
- this.$modal.loading("正在上传文件,请稍候...");
- this.number++;
- return true;
- },
- // 文件个数超出
- handleExceed() {
- this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
- },
- // 上传失败
- handleUploadError(err) {
- this.$modal.msgError("上传文件失败,请重试");
- this.$modal.closeLoading();
- },
- // 上传成功回调
- handleUploadSuccess(res, file) {
- if (res.code * 1 === 200) {
- this.uploadList.push({
- id: res.id,
- url: res.filepath,
- name: res.filename,
- });
- this.uploadedSuccessfully();
- } else {
- this.number--;
- this.$modal.closeLoading();
- this.$modal.msgError(res.msg);
- this.$refs.fileUpload.handleRemove(file);
- this.uploadedSuccessfully();
- }
- },
- // 删除文件
- handleDelete(index) {
- this.fileList.splice(index, 1);
- this.$emit("input", this.listToString(this.fileList, this.separator));
- },
- // 上传结束处理
- 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.separator));
- this.$modal.closeLoading();
- }
- },
- // 获取文件名称
- getFileName(name) {
- if (name.lastIndexOf("/") > -1) {
- return name.slice(name.lastIndexOf("/") + 1);
- } else {
- return "";
- }
- },
- // 对象转成指定字符串分隔
- listToString(list, separator) {
- list = list.map((file) =>
- JSON.stringify({
- id: file.id,
- url: file.url,
- name: file.name,
- })
- );
- let strs = "";
- separator = separator || ",";
- for (let i in list) {
- strs += list[i] + separator;
- }
- return strs != "" ? strs.substr(0, strs.length - 1) : "";
- },
- },
- };
- </script>
- <style scoped lang="scss">
- .upload-file-uploader {
- margin-bottom: 5px;
- }
- .upload-file-list .el-upload-list__item {
- border: 1px solid #e4e7ed;
- line-height: 2;
- margin-bottom: 10px;
- position: relative;
- }
- .upload-file-list .ele-upload-list__item-content {
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: inherit;
- }
- .ele-upload-list__item-content-action .el-link {
- margin-right: 10px;
- }
- </style>
|