|
@@ -13,12 +13,7 @@
|
|
|
/>
|
|
|
<div class="images">
|
|
|
<div v-for="(item, index) in fileList" :key="index" class="item">
|
|
|
- <div
|
|
|
- v-if="item.url"
|
|
|
- class="img"
|
|
|
- @mouseover="item.hover = true"
|
|
|
- @mouseout="item.hover = false"
|
|
|
- >
|
|
|
+ <div v-if="item.url" class="img" @mouseover="item.hover = true" @mouseout="item.hover = false">
|
|
|
<el-image
|
|
|
v-if="checkFileType(item.url) == 'image'"
|
|
|
ref="img"
|
|
@@ -27,68 +22,34 @@
|
|
|
style="width: 120px; height: 120px"
|
|
|
fit="cover"
|
|
|
/>
|
|
|
- <el-image
|
|
|
- v-else
|
|
|
- ref="img"
|
|
|
- :src="imageURL + item.url"
|
|
|
- style="width: 120px; height: 120px"
|
|
|
- fit="cover"
|
|
|
- >
|
|
|
+ <el-image v-else ref="img" :src="imageURL + item.url" style="width: 120px; height: 120px" fit="cover">
|
|
|
<div slot="error" class="image-slot">
|
|
|
- <img
|
|
|
- v-if="checkFileType(item.url) == 'word'"
|
|
|
- class="file"
|
|
|
- src="@/assets/common/word.png"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-if="checkFileType(item.url) == 'excel'"
|
|
|
- class="file"
|
|
|
- src="@/assets/common/excel.png"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-if="checkFileType(item.url) == 'ppt'"
|
|
|
- class="file"
|
|
|
- src="@/assets/common/ppt.png"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-if="checkFileType(item.url) == 'pdf'"
|
|
|
- class="file"
|
|
|
- src="@/assets/common/pdf.png"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-if="checkFileType(item.url) == 'file'"
|
|
|
- class="file"
|
|
|
- src="@/assets/common/zip.jpeg"
|
|
|
- />
|
|
|
+ <img v-if="checkFileType(item.url) == 'word'" class="file" src="@/assets/common/word.png" />
|
|
|
+ <img v-if="checkFileType(item.url) == 'excel'" class="file" src="@/assets/common/excel.png" />
|
|
|
+ <img v-if="checkFileType(item.url) == 'ppt'" class="file" src="@/assets/common/ppt.png" />
|
|
|
+ <img v-if="checkFileType(item.url) == 'pdf'" class="file" src="@/assets/common/pdf.png" />
|
|
|
+ <img v-if="checkFileType(item.url) == 'file'" class="file" src="@/assets/common/zip.jpeg" />
|
|
|
</div>
|
|
|
</el-image>
|
|
|
<div v-show="item.hover" class="mask">
|
|
|
- <i
|
|
|
- v-if="checkFileType(item.url) == 'image'"
|
|
|
- class="el-icon-zoom-in"
|
|
|
- @click="previewImage(item.url)"
|
|
|
- />
|
|
|
+ <i v-if="checkFileType(item.url) == 'image'" class="el-icon-zoom-in" @click="previewImage(item.url)" />
|
|
|
<i class="el-icon-upload2" @click="uploadImage(item.url)" />
|
|
|
<i class="el-icon-delete" @click="deleteImage(item.url)" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-if="multiple || (!multiple && fileList.length < 1)"
|
|
|
- class="add"
|
|
|
- @click="uploadImage()"
|
|
|
- >
|
|
|
+ <div v-if="multiple || (!multiple && fileList.length < 1)" class="add" @click="uploadImage()">
|
|
|
<i class="el-icon-plus" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { getOssConfig } from "@/api/common";
|
|
|
-import { findElem } from "@/utils/util";
|
|
|
+import { getOssConfig } from '@/api/common'
|
|
|
+import { findElem } from '@/utils/util'
|
|
|
|
|
|
export default {
|
|
|
- name: "FileUpload",
|
|
|
+ name: 'FileUpload',
|
|
|
props: {
|
|
|
// 接受上传的文件列表
|
|
|
fileList: Array,
|
|
@@ -96,123 +57,114 @@ export default {
|
|
|
// 接受上传的文件类型
|
|
|
fileType: {
|
|
|
type: Array,
|
|
|
- default: () => ["image", "word", "excel", "ppt", "pdf", "file"],
|
|
|
+ default: () => ['image', 'word', 'excel', 'ppt', 'pdf', 'file']
|
|
|
},
|
|
|
|
|
|
// 是否支持多选文件
|
|
|
multiple: {
|
|
|
type: Boolean,
|
|
|
- default: false,
|
|
|
+ default: false
|
|
|
},
|
|
|
startRestricting: {
|
|
|
type: Boolean,
|
|
|
- default: false,
|
|
|
+ default: false
|
|
|
},
|
|
|
restrictFilename: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
- return [];
|
|
|
- },
|
|
|
- },
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
imageURL: this.$imageUrl,
|
|
|
- oss_url: "",
|
|
|
+ oss_url: '',
|
|
|
dataObj: {},
|
|
|
- uploadImageUrl: "",
|
|
|
+ uploadImageUrl: '',
|
|
|
waitUploadList: [],
|
|
|
- fileName: "",
|
|
|
- };
|
|
|
+ fileName: ''
|
|
|
+ }
|
|
|
},
|
|
|
computed: {
|
|
|
isShowFileList: {
|
|
|
get: function () {
|
|
|
if (this.fileList.length > 0 && this.fileList[0].url) {
|
|
|
- return true;
|
|
|
+ return true
|
|
|
} else {
|
|
|
- return false;
|
|
|
+ return false
|
|
|
}
|
|
|
},
|
|
|
- set: function (newValue) {},
|
|
|
+ set: function (newValue) {}
|
|
|
},
|
|
|
accept() {
|
|
|
- const imageList = [".jpg", ".jpeg", ".png"];
|
|
|
- const videoList = [".mp4"];
|
|
|
- const wordList = [".doc", ".docx", ".dot", ".wps", ".wpt"];
|
|
|
- const excelList = [".xls", ".xlsx", ".xlt", ".et", ".ett"];
|
|
|
- const pptList = [".ppt", ".pptx", ".dps", ".dpt", ".pot", ".pps"];
|
|
|
- const pdfList = [".pdf"];
|
|
|
- const fileList = [".zip", ".rar", ".gz", ".apk"];
|
|
|
- let whiteList = [];
|
|
|
- this.fileType.includes("image") &&
|
|
|
- (whiteList = whiteList.concat(imageList));
|
|
|
- this.fileType.includes("video") &&
|
|
|
- (whiteList = whiteList.concat(videoList));
|
|
|
- this.fileType.includes("word") &&
|
|
|
- (whiteList = whiteList.concat(wordList));
|
|
|
- this.fileType.includes("excel") &&
|
|
|
- (whiteList = whiteList.concat(excelList));
|
|
|
- this.fileType.includes("ppt") && (whiteList = whiteList.concat(pptList));
|
|
|
- this.fileType.includes("pdf") && (whiteList = whiteList.concat(pdfList));
|
|
|
- this.fileType.includes("file") &&
|
|
|
- (whiteList = whiteList.concat(fileList));
|
|
|
- return whiteList.join(",");
|
|
|
+ const imageList = ['.jpg', '.jpeg', '.png']
|
|
|
+ const videoList = ['.mp4']
|
|
|
+ const wordList = ['.doc', '.docx', '.dot', '.wps', '.wpt']
|
|
|
+ const excelList = ['.xls', '.xlsx', '.xlt', '.et', '.ett']
|
|
|
+ const pptList = ['.ppt', '.pptx', '.dps', '.dpt', '.pot', '.pps']
|
|
|
+ const pdfList = ['.pdf']
|
|
|
+ const fileList = ['.zip', '.rar', '.gz', '.apk']
|
|
|
+ let whiteList = []
|
|
|
+ this.fileType.includes('image') && (whiteList = whiteList.concat(imageList))
|
|
|
+ this.fileType.includes('video') && (whiteList = whiteList.concat(videoList))
|
|
|
+ this.fileType.includes('word') && (whiteList = whiteList.concat(wordList))
|
|
|
+ this.fileType.includes('excel') && (whiteList = whiteList.concat(excelList))
|
|
|
+ this.fileType.includes('ppt') && (whiteList = whiteList.concat(pptList))
|
|
|
+ this.fileType.includes('pdf') && (whiteList = whiteList.concat(pdfList))
|
|
|
+ this.fileType.includes('file') && (whiteList = whiteList.concat(fileList))
|
|
|
+ return whiteList.join(',')
|
|
|
},
|
|
|
previewImages() {
|
|
|
- const fileList = [];
|
|
|
+ const fileList = []
|
|
|
if (this.fileList && this.fileList.length > 0) {
|
|
|
- this.fileList.forEach((item) => {
|
|
|
- if (this.checkFileType(item.url) == "image") {
|
|
|
- fileList.push(this.imageURL + item.url);
|
|
|
+ this.fileList.forEach(item => {
|
|
|
+ if (this.checkFileType(item.url) == 'image') {
|
|
|
+ fileList.push(this.imageURL + item.url)
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
}
|
|
|
- return fileList;
|
|
|
- },
|
|
|
+ return fileList
|
|
|
+ }
|
|
|
},
|
|
|
created() {
|
|
|
- getOssConfig().then((res) => {
|
|
|
- this.oss_url = res.data.host;
|
|
|
- });
|
|
|
+ getOssConfig().then(res => {
|
|
|
+ this.oss_url = res.data.host
|
|
|
+ })
|
|
|
},
|
|
|
methods: {
|
|
|
getUUID() {
|
|
|
- return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
|
|
|
- return (
|
|
|
- c === "x" ? (Math.random() * 16) | 0 : "r&0x3" | "0x8"
|
|
|
- ).toString(16);
|
|
|
- });
|
|
|
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
|
|
|
+ return (c === 'x' ? (Math.random() * 16) | 0 : 'r&0x3' | '0x8').toString(16)
|
|
|
+ })
|
|
|
},
|
|
|
createName(name) {
|
|
|
- const date = Date.now();
|
|
|
- const uuid = this.getUUID();
|
|
|
- const fileSuffix = name.substring(name.lastIndexOf(".") + 1);
|
|
|
- return `${date}${uuid}.${fileSuffix}`;
|
|
|
+ const date = Date.now()
|
|
|
+ const uuid = this.getUUID()
|
|
|
+ const fileSuffix = name.substring(name.lastIndexOf('.') + 1)
|
|
|
+ return `${date}${uuid}.${fileSuffix}`
|
|
|
},
|
|
|
|
|
|
// 检查文件类型
|
|
|
checkFileType(url) {
|
|
|
- if (!url) return "";
|
|
|
- const fileSuffix = url.substring(url.lastIndexOf(".") + 1);
|
|
|
+ if (!url) return ''
|
|
|
+ const fileSuffix = url.substring(url.lastIndexOf('.') + 1)
|
|
|
|
|
|
- if (["jpg", "jpeg", "png"].includes(fileSuffix)) {
|
|
|
- return "image";
|
|
|
- } else if (["doc", "docx", "dot", "wps", "wpt"].includes(fileSuffix)) {
|
|
|
- return "word";
|
|
|
- } else if (["xls", "xlsx", "xlt", "et", "ett"].includes(fileSuffix)) {
|
|
|
- return "excel";
|
|
|
- } else if (
|
|
|
- ["ppt", "pptx", "dps", "dpt", "pot", "pps"].includes(fileSuffix)
|
|
|
- ) {
|
|
|
- return "ppt";
|
|
|
- } else if (["pdf"].includes(fileSuffix)) {
|
|
|
- return "pdf";
|
|
|
- } else if (["zip", "rar", "gz", "apk"].includes(fileSuffix)) {
|
|
|
- return "file";
|
|
|
+ if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
|
|
|
+ return 'image'
|
|
|
+ } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
|
|
|
+ return 'word'
|
|
|
+ } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
|
|
|
+ return 'excel'
|
|
|
+ } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
|
|
|
+ return 'ppt'
|
|
|
+ } else if (['pdf'].includes(fileSuffix)) {
|
|
|
+ return 'pdf'
|
|
|
+ } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
|
|
|
+ return 'file'
|
|
|
}
|
|
|
{
|
|
|
- return "pdf";
|
|
|
+ return 'pdf'
|
|
|
}
|
|
|
},
|
|
|
|
|
@@ -220,114 +172,109 @@ export default {
|
|
|
async getOssConfig(fileName) {
|
|
|
const result = await new Promise((resolve, reject) => {
|
|
|
getOssConfig()
|
|
|
- .then((res) => {
|
|
|
- const fileKey = this.createName(fileName);
|
|
|
+ .then(res => {
|
|
|
+ const fileKey = this.createName(fileName)
|
|
|
|
|
|
- res.data.name = fileName;
|
|
|
- res.data.key = res.data.dir + fileKey;
|
|
|
+ res.data.name = fileName
|
|
|
+ res.data.key = res.data.dir + fileKey
|
|
|
|
|
|
- resolve(res.data);
|
|
|
+ resolve(res.data)
|
|
|
})
|
|
|
- .catch((res) => {
|
|
|
- resolve({});
|
|
|
- });
|
|
|
- });
|
|
|
- return result;
|
|
|
+ .catch(res => {
|
|
|
+ resolve({})
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return result
|
|
|
},
|
|
|
|
|
|
// 预览图片
|
|
|
previewImage(url) {
|
|
|
- const index = findElem(this.fileList, "url", url);
|
|
|
- this.$refs.img[index].showViewer = true;
|
|
|
+ const index = findElem(this.fileList, 'url', url)
|
|
|
+ this.$refs.img[index].showViewer = true
|
|
|
},
|
|
|
|
|
|
// 删除图片
|
|
|
deleteImage(url) {
|
|
|
- const index = findElem(this.fileList, "url", url);
|
|
|
- this.fileList.splice(index, 1);
|
|
|
+ const index = findElem(this.fileList, 'url', url)
|
|
|
+ this.fileList.splice(index, 1)
|
|
|
},
|
|
|
|
|
|
// 点击上传
|
|
|
uploadImage(url) {
|
|
|
- this.uploadImageUrl = url;
|
|
|
- document.querySelector(".uploader input").click();
|
|
|
+ this.uploadImageUrl = url
|
|
|
+ document.querySelector('.uploader input').click()
|
|
|
},
|
|
|
|
|
|
// 上传文件之前
|
|
|
async beforeUpload(file) {
|
|
|
const loading = this.$loading({
|
|
|
lock: true,
|
|
|
- text: "Loading",
|
|
|
- spinner: "el-icon-loading",
|
|
|
- background: "rgba(0, 0, 0, 0.7)",
|
|
|
- });
|
|
|
+ text: 'Loading',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ })
|
|
|
|
|
|
- this.getFileName(file.name);
|
|
|
- this.$emit("handleIsFileName", this.fileName);
|
|
|
- this.dataObj = await this.getOssConfig(this.fileName);
|
|
|
- console.log(this.dataObj, "ppp");
|
|
|
- this.waitUploadList.push(this.dataObj);
|
|
|
+ this.getFileName(file.name)
|
|
|
+ this.$emit('handleIsFileName', this.fileName)
|
|
|
+ this.dataObj = await this.getOssConfig(this.fileName)
|
|
|
+ console.log(this.dataObj, 'ppp')
|
|
|
+ this.waitUploadList.push(this.dataObj)
|
|
|
},
|
|
|
|
|
|
// 文件上传成功
|
|
|
uploadSuccess(res, file) {
|
|
|
const loading = this.$loading({
|
|
|
lock: true,
|
|
|
- text: "Loading",
|
|
|
- spinner: "el-icon-loading",
|
|
|
- background: "rgba(0, 0, 0, 0.7)",
|
|
|
- });
|
|
|
+ text: 'Loading',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ })
|
|
|
|
|
|
if (this.uploadImageUrl) {
|
|
|
- const index = findElem(this.fileList, "url", this.uploadImageUrl);
|
|
|
+ const index = findElem(this.fileList, 'url', this.uploadImageUrl)
|
|
|
this.$set(this.fileList, index, {
|
|
|
name: this.dataObj.name,
|
|
|
url: this.dataObj.key,
|
|
|
- hover: false,
|
|
|
- });
|
|
|
- this.waitUploadList = [];
|
|
|
+ hover: false
|
|
|
+ })
|
|
|
+ this.waitUploadList = []
|
|
|
} else {
|
|
|
- this.getFileName(file.name);
|
|
|
- const index = findElem(this.waitUploadList, "name", this.fileName);
|
|
|
+ this.getFileName(file.name)
|
|
|
+ const index = findElem(this.waitUploadList, 'name', this.fileName)
|
|
|
|
|
|
this.fileList.push({
|
|
|
name: this.waitUploadList[index].name,
|
|
|
url: this.waitUploadList[index].key,
|
|
|
- hover: false,
|
|
|
- });
|
|
|
+ hover: false
|
|
|
+ })
|
|
|
|
|
|
- this.waitUploadList.splice(index, 1);
|
|
|
+ this.waitUploadList.splice(index, 1)
|
|
|
}
|
|
|
- this.showFileList = true;
|
|
|
- loading.close();
|
|
|
+ this.showFileList = true
|
|
|
+ loading.close()
|
|
|
},
|
|
|
|
|
|
getFileName(name) {
|
|
|
- const fileName = name.substring(0, name.lastIndexOf("."));
|
|
|
- let suffix = name.match(/.[^.]+$/)[0];
|
|
|
- console.log(suffix, fileName);
|
|
|
+ const fileName = name.substring(0, name.lastIndexOf('.'))
|
|
|
+ let suffix = name.match(/.[^.]+$/)[0]
|
|
|
+ console.log(suffix, fileName)
|
|
|
// 押金申请上传限制
|
|
|
- this.fileName = name;
|
|
|
+ this.fileName = name
|
|
|
if (this.startRestricting) {
|
|
|
// 检查是否存在相应文字,否filterKeywords.length = 0
|
|
|
- const filterKeywords = this.restrictFilename.filter((k) =>
|
|
|
- fileName.includes(k)
|
|
|
- );
|
|
|
+ const filterKeywords = this.restrictFilename.filter(k => fileName.includes(k))
|
|
|
// filterKeywords = 0 || 'zip', 'rar', 'gz', 'apk' 归为 其他文件
|
|
|
- if (
|
|
|
- !filterKeywords.length ||
|
|
|
- suffix.includes("zip", "rar", "gz", "apk")
|
|
|
- ) {
|
|
|
- this.fileName = `其他文件${suffix}`;
|
|
|
+ if (!filterKeywords.length || suffix.includes('zip', 'rar', 'gz', 'apk')) {
|
|
|
+ this.fileName = `其他文件${suffix}`
|
|
|
}
|
|
|
// 限制照片/相片名称统一为照片 , restrictFilename[restrictFilename.length-1|restrictFilename.length-1]为照片、相片
|
|
|
- if (fileName.includes("相片") || fileName.includes("照片")) {
|
|
|
- this.fileName = `照片${suffix}`;
|
|
|
+ if (fileName.includes('相片') || fileName.includes('照片')) {
|
|
|
+ this.fileName = `照片${suffix}`
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|