Skip to content

E
exhibition_backstage
提交 83d4acc0 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

文物上传优化

上级 b5326eb4
显示空白字符变更
内嵌 并排
正在显示 包含 198 行增加 和 226 行删除
src/components/Uploader/ManualUploader.vue
浏览文件 @ 83d4acc0
<template>
<div class="images-list">
<el-upload
......@@ -11,49 +12,27 @@
:list-type="listType"
:accept="fileAccept"
:auto-upload="false"
ref="ManualUploader"
>
<i v-if="listType === 'picture-card'" class="el-icon-plus"></i>
<i
v-if="listType === 'picture-card'"
class="el-icon-plus"
slot="trigger"
></i>
<el-button v-else size="small" type="primary">点击上传</el-button>
<div v-if="showTip" slot="tip" class="el-upload__tip">
只能上传{{ fileTypeName || "jpg/png" }}文件，且不超过
{{ fileSize }}MB，最多上传{{ fileLimit }}个文件
</div>
</el-upload>
<!-- <el-upload
action
:before-upload="handleBeforeUpload"
:on-success="handleSuccess"
:on-error="handleUploadError"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-change="handleChange"
:file-list="fileList"
:multiple="fileLimit > 1"
:headers="headers"
:limit="fileLimit"
:list-type="listType"
name="files"
:accept="fileAccept"
auto-upload="false"
>
<i v-if="listType === 'picture-card'" class="el-icon-plus"></i>
<el-button v-else size="small" type="primary">点击上传</el-button>
<div v-if="showTip" slot="tip" class="el-upload__tip">
只能上传{{ fileTypeName || "jpg/png" }}文件，且不超过
{{ fileSize }}MB，最多上传{{ fileLimit }}个文件
</div>
</el-upload> -->
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { upload } from "@/utils/upload";
import {Debounce} from '@/utils/index'
// import { getToken } from "@/utils/auth";
export default {
name: "RcUploader",
name: "ManualUploader",
props: {
// 值
// value: [String, Object, Array],
files: {
type: Array,
default: () => [],
......@@ -91,19 +70,18 @@ export default {
process.env.NODE_ENV === "development"
? "/api/sysFiles/upload"
: process.env.NODE_ENV + "/sysFiles/upload", // 上传的图片服务器地址
headers: {
authorization: getToken(),
},
// headers: {
// authorization: getToken(),
// },
fileList: [],
// tempFileList: [],
uploadDisabled: false,
// uploadDisabled: false,
upLoadList: [],
};
},
watch: {
files: {
handler: function (newVal, oldVal) {
console.log("newVal", newVal);
this.fileList = newVal;
},
immediate: true,
......@@ -134,90 +112,11 @@ export default {
this.fileList = JSON.parse(JSON.stringify(this.files));
},
methods: {
// 自定义上传实现，用于修改上传后的封面
httpRequest(e) {
var formData = new FormData();
console.log("e", e);
formData.append("files", e.file);
// debugger
// let files = e.file.files;
// let formData = new FormData();
// files = Array.from(files); // files是类数组，需要先转为数组
// files.forEach((file) => {
// formData.append("file", file);
// });
// console.log('formData',formData.get('files'));
upload(formData).then((res) => {
console.log("上传res", res);
if (res.data.code == 0) {
console.log(res);
var file = res.data.data[0];
this.fileList.push({
url: file.url, //pdf封面图片
realUrl: file.url,
fileId: file.fileId,
name: file.name,
//接口返回的pdf文件链接
});
// var last = res.data.substring(res.data.lastIndexOf(".")); //将接口中返回的各文件链接进行截取，来判断属于什么格式文件
// if (last == ".pdf") {
// this.fileList.push({
// url: res.data[0].url, //pdf封面图片
// realUrl: res.data[0].url,
// fileId: res.data[0].fileId,
// name: res.data[0].fileId,
// //接口返回的pdf文件链接
// });
// } else if (
// last == ".png" ||
// last == ".jpg" ||
// last == ".jpeg" ||
// last == ".jfif"
// ) {
// this.fileList.push({
// url: res.data.result,
// realurl: res.data.result,
// fileId: res.data[0].fileId,
// name: res.data[0].fileId,
// });
// } else if (last == ".doc" || last == ".docx") {
// this.fileList.push({
// url: res.data.result,
// realurl: res.data.result,
// fileId: res.data[0].fileId,
// name: res.data[0].fileId,
// });
// } else if (last == ".xls" || last == ".xlsx") {
// this.fileList.push({
// url: res.data.result,
// realurl: res.data.result,
// fileId: res.data[0].fileId,
// name: res.data[0].fileId,
// });
// } else if (last == ".mp4" || last == ".wav") {
// this.fileList.push({
// url: res.data.result,
// realurl: res.data.result,
// fileId: res.data[0].fileId,
// name: res.data[0].fileId,
// });
// }
} else {
this.$message({
message: res.data.msg,
type: "error",
offset: 70,
});
}
});
getFiles(){
return this.upLoadList
},
// 上传前校检格式和大小
handleBeforeUpload(file) {
// 校检文件类型
this.$emit("endLoading");
this.$emit("startLoading");
return new Promise((resolve, reject) => {
var isValidated = true;
if (this.fileType && file) {
......@@ -234,7 +133,6 @@ export default {
this.$message.error(
`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
);
this.$emit("endLoading");
isValidated = false;
}
}
......@@ -260,65 +158,31 @@ export default {
handleExceed() {
this.$message.error(`超出上传文件个数,请删除以后再上传！`);
},
// // 文件上传成功的钩子
// handleSuccess(res, file, fileList) {
// console.log("res", res);
// console.log("fileList", fileList);
// this.$message.success("上传成功");
// this.$emit("endLoading");
// this.changeFileList(fileList);
// },
// 文件列表移除文件时的钩子
handleRemove(file, fileList) {
this.changeFileList(fileList);
this.upLoadList.map((item, index) => {
if (item.uid === file.uid) {
this.upLoadList.splice(index, 1);
}
});
},
handleChange(file, fileList) {
// console.log(fileList);
if (file.status === "ready") {
console.log("ready");
this.handleBeforeUpload(file)
.then((res) => {
console.log("上传验证成功", res);
// this.list.push(file)
Debounce(() => {
this.totalList = fileList;
console.log('this.totalList',this.totalList);
}, 500);
// debugger;
this.upLoadList.push(res);
})
.catch((err) => {
console.log("err", err);
});
}
// if (fileList.length == this.fileLimit) {
// this.uploadDisabled = true;
// }
},
// 文件列表改变的时候，更新组件的v-model的文的数据
changeFileList(fileList) {
console.log("fileList", fileList);
const tempFileList = fileList.map((item) => {
let tempItem = {
name: item.name,
url: item.response ? item.response.data[0].url : item.url,
};
return tempItem;
});
this.$emit("endLoading");
this.$emit("handleFileReady", tempFileList);
},
},
};
</script>
<style lang="scss" >
// .images-list{
// border: 1px dashed #d5d5d5;
// padding: 10px;
// border-radius: 4px;
// background: #fff;
// }
.disabled .el-upload--picture-card {
display: none !important;
}
......
src/components/Uploader/index.vue
浏览文件 @ 83d4acc0
......@@ -14,7 +14,6 @@
:limit="fileLimit"
:list-type="listType"
name="files"
:accept="fileAccept"
>
<i v-if="listType === 'picture-card'" class="el-icon-plus"></i>
......
src/utils/upload.js
浏览文件 @ 83d4acc0
......@@ -23,7 +23,7 @@ export function upload(data) {
'authorization': getToken(),
}
}).then(response => {
resolve(response)
resolve(response.data)
}).catch(error => {
reject(error)
})
......
src/views/culturalRelic/components/InfoEditDialog.vue
浏览文件 @ 83d4acc0
......@@ -30,7 +30,7 @@
style="width: 100%"
>
<el-option
v-for="(value,key) in dict.cultural_relic_type"
v-for="(value, key) in dict.cultural_relic_type"
:key="key"
:label="value"
:value="key"
......@@ -45,7 +45,7 @@
style="width: 100%"
>
<el-option
v-for="(value,key) in dict.cultural_relic_level"
v-for="(value, key) in dict.cultural_relic_level"
:key="key"
:label="value"
:value="key"
......@@ -60,7 +60,7 @@
style="width: 100%"
>
<el-option
v-for="(value,key) in dict.cultural_relic_texture"
v-for="(value, key) in dict.cultural_relic_texture"
:key="key"
:label="value"
:value="key"
......@@ -176,6 +176,16 @@
</el-col>
<el-col :span="12">
<el-form-item label="文物封面" :label-width="formLabelWidth">
<ManualUploader
:files="faceImage"
:fileLimit="1"
:fileSize="50"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
ref="faceImage"
/>
</el-form-item>
<el-form-item label="文物图片" :label-width="formLabelWidth">
<ManualUploader
:files="images"
......@@ -183,9 +193,7 @@
:fileSize="50"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
@handleFileReady="handleImagesReady"
@startLoading="startLoading"
@endLoading="endLoading"
ref="images"
/>
</el-form-item>
......@@ -196,9 +204,7 @@
:fileSize="50"
:fileType="['mp4', 'wav']"
listType="picture-card"
@handleFileReady="handleVideosReady"
@startLoading="startLoading"
@endLoading="endLoading"
ref="videos"
/>
</el-form-item>
<el-form-item label="讲解词文件" :label-width="formLabelWidth">
......@@ -207,9 +213,7 @@
:fileLimit="6"
listType="text"
:fileType="['doc', 'tet', 'docx']"
@handleFileReady="handleDocReady"
@startLoading="startLoading"
@endLoading="endLoading"
ref="sayExplain"
/>
</el-form-item>
<el-form-item label="文物音频" :label-width="formLabelWidth">
......@@ -219,9 +223,7 @@
:fileSize="50"
:fileType="['mp3']"
listType="text"
@handleFileReady="handleAudiosReady"
@startLoading="startLoading"
@endLoading="endLoading"
ref="audios"
/>
</el-form-item>
</el-col>
......@@ -230,7 +232,7 @@
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" :disabled="loading"
<el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-right" style="margin-left: 5px"></i
></el-button>
</div>
......@@ -244,6 +246,7 @@ import { addCulturalRelic, editCulturalRelic } from "@/api/culturalRelic";
import Uploader from "@/components/Uploader/index.vue";
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import { mapGetters } from "vuex";
import { upload } from "@/utils/upload";
export default {
name: "InfoEditDialog",
components: {
......@@ -341,6 +344,10 @@ export default {
});
},
methods: {
getFiles() {
debugger;
},
covertStrToArr(name) {
var fileName = "";
switch (name) {
......@@ -420,8 +427,6 @@ export default {
},
async handleSubmit() {
this.loading = true;
// 修改文献为字符串
if (this.dialogForm.exhibitionId) {
console.log("this.dialogForm", this.dialogForm);
let params = { ...this.dialogForm };
......@@ -434,26 +439,129 @@ export default {
// this.$emit("handleClose");
// this.$emit("refresh");
// this.literatureModelValue = [];
// this.dialogForm ={}
// }
} else {
console.log("this.dialogForm", this.dialogForm);
const { deptId, regionCode } = this.userInfo;
const params = { ...this.dialogForm, deptId, regionCode };
params.literature = this.literatureModelValue.join(",");
params.status = this.dialogForm.status ? 1 : 0;
console.log("params", params);
let res = await addCulturalRelic(params);
if (res.code == 0) {
this.$message.success("提交成功！");
this.loading = false;
this.literatureModelValue = [];
this.$emit("handleClose");
this.$emit("refresh");
const mediaArr = [
"faceImage",
"images",
"audios",
"videos",
"sayExplain",
];
// 不确定每项是否有数据，因此不使用promise.all
let ps = [];
let faceImageRes = [];
let imagesRes = [];
let audiosRes = [];
let videosRes = [];
mediaArr.map((media) => {
let files = this.$refs[media].getFiles();
let fileList = [...files];
if (fileList.length > 0) {
let formData = new FormData();
fileList.forEach((file) => {
formData.append("files", file.raw);
});
ps.push(upload(formData));
} else {
ps.push(null);
}
});
let files = {};
Promise.all(ps).then(
(res) => {
// this.faceImageRes = res[0];
// this.imagesRes = res[1]; // 这个数据拿不到
// this.audiosRes = res[2];
// this.videosRes = res[3];
// this.sayExplainsRes = res[4];
res.forEach((item, index) => {
// let faceImageRes = res[0]
if (item) {
let type = mediaArr[index];
// this.dialogForm[type] = res[index];
files[type] = res[index];
}
});
let fileIds = "";
for (const key in files) {
if (files[key]) {
var fileResult = files[key].data;
fileResult.forEach((file) => {
console.log("file", file);
fileIds += file.fileId;
});
}
}
this.dialogForm[mediaArr[index]] = fileIds
debugger;
// files.forEach((file) => {
// fileIds += file.fileId;
// });
// res是每一个组件上传的结果
// res.map((result) => {
// const { data } = result;
// data.map((dataItem) => {
// // if(this.getFileType(dataItem))
// switch (this.getFileType(dataItem)) {
// case "audio":
// break;
// default:
// break;
// }
// });
// });
// if (res.code == 0) {
// console.log("上传成功");
// }
},
(reason) => {
console.log(reason);
}
);
// const { deptId, regionCode } = this.userInfo;
// const params = { ...this.dialogForm, deptId, regionCode };
// params.literature = this.literatureModelValue.join(",");
// params.status = this.dialogForm.status ? 1 : 0;
// console.log("params", params);
// let res = await addCulturalRelic(params);
// if (res.code == 0) {
// this.$message.success("提交成功！");
// this.loading = false;
// this.literatureModelValue = [];
// this.$emit("handleClose");
// this.$emit("refresh");
// this.dialogForm = {};
// }
}
},
// 通过文件名获取文件类型
getFileType(fileName) {
let suffix = fileName.split(".")[1];
if (
suffix == "jpg" ||
suffix == "jpeg" ||
suffix == "png" ||
suffix == "gif"
) {
return "image";
} else if (suffix === "mp4" || suffix === "avi" || suffix === "mpeg") {
return "video";
} else if (suffix === "doc" || suffix === "docx") {
return "doc";
} else if (suffix === "mp3" || suffix === "wav" || suffix === "flac") {
return "audio";
}
},
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
......@@ -501,13 +609,13 @@ export default {
this.dialogForm.sayExplain = str;
},
startLoading() {
this.loading = true;
},
// startLoading() {
// this.loading = true;
// },
endLoading() {
this.loading = false;
},
// endLoading() {
// this.loading = false;
// },
refresh() {
this.$emit("refresh");
......
src/views/culturalRelic/config.js
浏览文件 @ 83d4acc0
......@@ -61,12 +61,6 @@ export const title = [{
// label: "创建时间",
// columnAlign: 'center',
// },
{
prop: "deptName",
label: "收藏馆名称",
columnAlign: 'center',
},
{
prop: "deptName",
......@@ -105,38 +99,37 @@ export const title = [{
columnAlign: 'center',
},
{
prop: "browseCount",
label: "浏览量",
prop: "collectCount",
label: "收藏量",
columnAlign: 'center',
},
{
prop: "collectCount",
label: "收藏量",
prop: "browseCount",
label: "浏览量",
columnAlign: 'center',
},
{
prop: "sourceWay",
label: "来源方式",
width: 100,
columnAlign: 'center',
},
{
prop: "status",
label: "上下架状态",
prop: "remark",
label: "备注",
width: 100,
columnAlign: 'center',
isStatus: true
},
{
prop: "remark",
label: "备注",
prop: "status",
label: "上下架状态",
width: 100,
columnAlign: 'center',
isStatus: true
},
// directory 文件夹
// flag3d 是否有3d图片
// updateId 更新人
......@@ -145,16 +138,17 @@ export const title = [{
export const operates = {
operate: true,
label: "操作",
width: "300px",
width: "260px",
minwidth: "220px",
titleAlign: "center",
columnAlign: "center",
}
export const operations = [{
type: 'view',
title: '预览'
},
export const operations = [
// {
// type: 'view',
// title: '预览'
// },
{
type: 'edit',
title: '编辑'
......
src/views/culturalRelic/index.vue
浏览文件 @ 83d4acc0
......@@ -47,7 +47,7 @@
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[100, 200, 300, 400]"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
......@@ -58,6 +58,7 @@
:visible="drawerVisible"
:form="form"
@handleClose="handleClose"
@refresh="loadData"
/>
</div>
</template>
......@@ -81,7 +82,7 @@ export default {
"cultural_relic_years",
"cultural_relic_level",
"cultural_relic_texture",
"cultural_relic_type"
"cultural_relic_type",
],
data() {
return {
......@@ -105,7 +106,7 @@ export default {
prop: "name",
type: "input",
label: "文物级别",
selectOptions:[]
selectOptions: [],
},
{
prop: "status",
......@@ -156,7 +157,7 @@ export default {
dict(value) {
if (value) {
this.dict = value;
this.culturalLevel = []
this.culturalLevel = [];
console.log("this.dict ", this.dict);
}
......@@ -243,10 +244,16 @@ export default {
},
// 改变页容量
handleSizeChange() {},
handleSizeChange(value) {
this.list.size = value;
this.loadData();
},
// 改变当前显示页
handleCurrentChange() {},
handleCurrentChange(value) {
this.list.current = value;
this.loadData();
},
// 搜索
onSubmitSearch() {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论