Skip to content

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

文物上传优化

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