|
@@ -13,34 +13,82 @@
|
|
/>
|
|
/>
|
|
<div class="images">
|
|
<div class="images">
|
|
<div v-for="(item, index) in fileList" :key="index" class="item">
|
|
<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;">
|
|
|
|
- <el-image v-if="checkFileType(item.url) == 'image'" ref="img" :src="imageURL + item.url" :preview-src-list="previewImages" 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
|
|
|
|
+ v-if="item.url"
|
|
|
|
+ class="img"
|
|
|
|
+ @mouseover="item.hover = true"
|
|
|
|
+ @mouseout="item.hover = false"
|
|
|
|
+ >
|
|
|
|
+ <el-image
|
|
|
|
+ v-if="checkFileType(item.url) == 'image'"
|
|
|
|
+ ref="img"
|
|
|
|
+ :src="imageURL + item.url"
|
|
|
|
+ :preview-src-list="previewImages"
|
|
|
|
+ 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">
|
|
<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>
|
|
</div>
|
|
</el-image>
|
|
</el-image>
|
|
<div v-show="item.hover" class="mask">
|
|
<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-upload2" @click="uploadImage(item.url)" />
|
|
<i class="el-icon-delete" @click="deleteImage(item.url)" />
|
|
<i class="el-icon-delete" @click="deleteImage(item.url)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div v-if="multiple || (!multiple && fileList.length < 1)" class="add" @click="uploadImage()"><i class="el-icon-plus" /></div>
|
|
|
|
|
|
+ <div
|
|
|
|
+ v-if="multiple || (!multiple && fileList.length < 1)"
|
|
|
|
+ class="add"
|
|
|
|
+ @click="uploadImage()"
|
|
|
|
+ >
|
|
|
|
+ <i class="el-icon-plus" />
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
-import { getOssConfig } from '@/api/common'
|
|
|
|
-import { findElem } from '@/utils/util'
|
|
|
|
|
|
+import { getOssConfig } from "@/api/common";
|
|
|
|
+import { findElem } from "@/utils/util";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
- name: 'FileUpload',
|
|
|
|
|
|
+ name: "FileUpload",
|
|
props: {
|
|
props: {
|
|
// 接受上传的文件列表
|
|
// 接受上传的文件列表
|
|
fileList: Array,
|
|
fileList: Array,
|
|
@@ -48,280 +96,298 @@ export default {
|
|
// 接受上传的文件类型
|
|
// 接受上传的文件类型
|
|
fileType: {
|
|
fileType: {
|
|
type: Array,
|
|
type: Array,
|
|
- default: () => ['image', 'word', 'excel', 'ppt', 'pdf', 'file']
|
|
|
|
|
|
+ default: () => ["image", "word", "excel", "ppt", "pdf", "file"],
|
|
},
|
|
},
|
|
|
|
|
|
// 是否支持多选文件
|
|
// 是否支持多选文件
|
|
multiple: {
|
|
multiple: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
- default: false
|
|
|
|
|
|
+ default: false,
|
|
},
|
|
},
|
|
startRestricting: {
|
|
startRestricting: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
- default: false
|
|
|
|
|
|
+ default: false,
|
|
},
|
|
},
|
|
restrictFilename: {
|
|
restrictFilename: {
|
|
type: Array,
|
|
type: Array,
|
|
default: () => {
|
|
default: () => {
|
|
- return []
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
|
|
+ return [];
|
|
|
|
+ },
|
|
|
|
+ },
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
imageURL: this.$imageUrl,
|
|
imageURL: this.$imageUrl,
|
|
- oss_url: '',
|
|
|
|
|
|
+ oss_url: "",
|
|
dataObj: {},
|
|
dataObj: {},
|
|
- uploadImageUrl: '',
|
|
|
|
|
|
+ uploadImageUrl: "",
|
|
waitUploadList: [],
|
|
waitUploadList: [],
|
|
- fileName: ''
|
|
|
|
- }
|
|
|
|
|
|
+ fileName: "",
|
|
|
|
+ };
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
isShowFileList: {
|
|
isShowFileList: {
|
|
- get: function() {
|
|
|
|
|
|
+ get: function () {
|
|
if (this.fileList.length > 0 && this.fileList[0].url) {
|
|
if (this.fileList.length > 0 && this.fileList[0].url) {
|
|
- return true
|
|
|
|
|
|
+ return true;
|
|
} else {
|
|
} else {
|
|
- return false
|
|
|
|
|
|
+ return false;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- set: function(newValue) {}
|
|
|
|
|
|
+ set: function (newValue) {},
|
|
},
|
|
},
|
|
accept() {
|
|
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() {
|
|
previewImages() {
|
|
- const fileList = []
|
|
|
|
|
|
+ const fileList = [];
|
|
if (this.fileList && this.fileList.length > 0) {
|
|
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() {
|
|
created() {
|
|
- getOssConfig().then(res => {
|
|
|
|
- this.oss_url = res.data.host
|
|
|
|
- })
|
|
|
|
|
|
+ getOssConfig().then((res) => {
|
|
|
|
+ this.oss_url = res.data.host;
|
|
|
|
+ });
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
getUUID() {
|
|
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) {
|
|
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) {
|
|
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'
|
|
|
|
- } {
|
|
|
|
- return 'pdf'
|
|
|
|
|
|
+ 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";
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
// 获取oss配置
|
|
// 获取oss配置
|
|
async getOssConfig(fileName) {
|
|
async getOssConfig(fileName) {
|
|
const result = await new Promise((resolve, reject) => {
|
|
const result = await new Promise((resolve, reject) => {
|
|
- getOssConfig().then(res => {
|
|
|
|
- const fileKey = this.createName(fileName)
|
|
|
|
|
|
+ getOssConfig()
|
|
|
|
+ .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)
|
|
|
|
- }).catch(res => {
|
|
|
|
- resolve({})
|
|
|
|
- })
|
|
|
|
- })
|
|
|
|
- return result
|
|
|
|
|
|
+ resolve(res.data);
|
|
|
|
+ })
|
|
|
|
+ .catch((res) => {
|
|
|
|
+ resolve({});
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ return result;
|
|
},
|
|
},
|
|
|
|
|
|
// 预览图片
|
|
// 预览图片
|
|
previewImage(url) {
|
|
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) {
|
|
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) {
|
|
uploadImage(url) {
|
|
- this.uploadImageUrl = url
|
|
|
|
- document.querySelector('.uploader input').click()
|
|
|
|
|
|
+ this.uploadImageUrl = url;
|
|
|
|
+ document.querySelector(".uploader input").click();
|
|
},
|
|
},
|
|
|
|
|
|
// 上传文件之前
|
|
// 上传文件之前
|
|
async beforeUpload(file) {
|
|
async beforeUpload(file) {
|
|
const loading = this.$loading({
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
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) {
|
|
uploadSuccess(res, file) {
|
|
const loading = this.$loading({
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
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) {
|
|
if (this.uploadImageUrl) {
|
|
- const index = findElem(this.fileList, 'url', this.uploadImageUrl)
|
|
|
|
|
|
+ const index = findElem(this.fileList, "url", this.uploadImageUrl);
|
|
this.$set(this.fileList, index, {
|
|
this.$set(this.fileList, index, {
|
|
name: this.dataObj.name,
|
|
name: this.dataObj.name,
|
|
url: this.dataObj.key,
|
|
url: this.dataObj.key,
|
|
- hover: false
|
|
|
|
- })
|
|
|
|
- this.waitUploadList = []
|
|
|
|
|
|
+ hover: false,
|
|
|
|
+ });
|
|
|
|
+ this.waitUploadList = [];
|
|
} else {
|
|
} 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({
|
|
this.fileList.push({
|
|
name: this.waitUploadList[index].name,
|
|
name: this.waitUploadList[index].name,
|
|
url: this.waitUploadList[index].key,
|
|
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);
|
|
|
|
|
|
+ getFileName(name) {
|
|
|
|
+ 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) {
|
|
if (this.startRestricting) {
|
|
- const filterKeywords = this.restrictFilename.filter(k => fileName.includes(k))
|
|
|
|
- console.log(filterKeywords)
|
|
|
|
- if (!filterKeywords.length || suffix.includes('zip', 'rar', 'gz', 'apk')) {
|
|
|
|
- this.fileName = `其他文件${suffix}`
|
|
|
|
|
|
+ // 检查是否存在相应文字,否filterKeywords.length = 0
|
|
|
|
+ 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}`;
|
|
|
|
+ }
|
|
|
|
+ // 限制照片/相片名称统一为照片 , restrictFilename[restrictFilename.length-1|restrictFilename.length-1]为照片、相片
|
|
|
|
+ if (fileName.includes("相片") || fileName.includes("照片")) {
|
|
|
|
+ this.fileName = `照片${suffix}`;
|
|
}
|
|
}
|
|
- // if(filterKeywords.length ){
|
|
|
|
-
|
|
|
|
- // }
|
|
|
|
}
|
|
}
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
- .images {
|
|
|
|
- display: flex;
|
|
|
|
- flex-wrap: wrap;
|
|
|
|
- .item {
|
|
|
|
- margin-right: 20px;
|
|
|
|
- .img {
|
|
|
|
- width: 120px;
|
|
|
|
- height: 120px;
|
|
|
|
- border-radius: 5px;
|
|
|
|
- overflow: hidden;
|
|
|
|
- position: relative;
|
|
|
|
- border: 1px dashed #eaeaea;
|
|
|
|
- display: flex;
|
|
|
|
- .el-image {
|
|
|
|
- display: block;
|
|
|
|
- }
|
|
|
|
- .file {
|
|
|
|
- width: 120px;
|
|
|
|
- height: 120px;
|
|
|
|
- display: block;
|
|
|
|
- padding: 30px;
|
|
|
|
- }
|
|
|
|
- .mask {
|
|
|
|
- position: absolute;
|
|
|
|
- left: 0;
|
|
|
|
- top: 0;
|
|
|
|
- width: 120px;
|
|
|
|
- height: 120px;
|
|
|
|
- background: rgba($color: #000000, $alpha: 0.3);
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- i {
|
|
|
|
- font-size: 20px;
|
|
|
|
- color: #ffffff;
|
|
|
|
- cursor: pointer;
|
|
|
|
- margin: 0 8px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .add {
|
|
|
|
- width: 120px;
|
|
|
|
- height: 120px;
|
|
|
|
- border: 1px dashed #eaeaea;
|
|
|
|
- border-radius: 5px;
|
|
|
|
- cursor: pointer;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- i {
|
|
|
|
- font-size: 30px;
|
|
|
|
- color: #999;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .uploader {
|
|
|
|
- height: 0;
|
|
|
|
|
|
+.images {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ .item {
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ .img {
|
|
|
|
+ width: 120px;
|
|
|
|
+ height: 120px;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ position: relative;
|
|
|
|
+ border: 1px dashed #eaeaea;
|
|
|
|
+ display: flex;
|
|
|
|
+ .el-image {
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ .file {
|
|
|
|
+ width: 120px;
|
|
|
|
+ height: 120px;
|
|
|
|
+ display: block;
|
|
|
|
+ padding: 30px;
|
|
|
|
+ }
|
|
|
|
+ .mask {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 0;
|
|
|
|
+ width: 120px;
|
|
|
|
+ height: 120px;
|
|
|
|
+ background: rgba($color: #000000, $alpha: 0.3);
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ i {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ margin: 0 8px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .add {
|
|
|
|
+ width: 120px;
|
|
|
|
+ height: 120px;
|
|
|
|
+ border: 1px dashed #eaeaea;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ i {
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ color: #999;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+}
|
|
|
|
+.uploader {
|
|
|
|
+ height: 0;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|