|
|
@@ -0,0 +1,352 @@
|
|
|
+<template>
|
|
|
+ <div class="UploadFile-container">
|
|
|
+ <template>
|
|
|
+ <transition-group
|
|
|
+ class="el-upload-list el-upload-list--picture-card" style="flex-wrap: wrap; display: flex"
|
|
|
+ tag="ul" name="el-list"
|
|
|
+ >
|
|
|
+ <li class="el-upload-list__item is-success" v-for="(file, index) in fileImages" :key="index">
|
|
|
+ <el-image
|
|
|
+ :src="getImgUrl(file.url)" class="el-upload-list__item-thumbnail"
|
|
|
+ :preview-src-list="getImgList(fileImages)" :z-index="10000" :ref="'image' + index"
|
|
|
+ ></el-image>
|
|
|
+ <span class="el-upload-list__item-actions">
|
|
|
+ <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(index)">
|
|
|
+ <i class="el-icon-zoom-in"></i>
|
|
|
+ </span>
|
|
|
+ <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(index)">
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </span>
|
|
|
+ <span @click="handleUpdate(file, index)">
|
|
|
+ <i class="el-icon-edit-outline"></i>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ :title="file.fileName"
|
|
|
+ style="position: absolute;bottom:-25px;width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
|
|
|
+ >
|
|
|
+ {{ file.fileName }}
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ </transition-group>
|
|
|
+ </template>
|
|
|
+ <el-upload
|
|
|
+ :action="define.comUploadUrl"
|
|
|
+ :headers="uploadHeaders"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :on-error="handleError"
|
|
|
+ :multiple="limit !== 1"
|
|
|
+ :show-file-list="false"
|
|
|
+ accept="image/*"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :disabled="disabled"
|
|
|
+ list-type="picture-card"
|
|
|
+ :limit="limit"
|
|
|
+ :file-list="fileList"
|
|
|
+ class="upload-btn"
|
|
|
+ v-show="!fileList.length"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ <span @click.stop="scanClick" v-if="scanCode">
|
|
|
+ <el-popover
|
|
|
+ v-model="isScan" placement="bottom" @hide="scanHidden" title="微信扫一扫上传" width="128"
|
|
|
+ trigger="click" append-to-body
|
|
|
+ >
|
|
|
+ <amis-sdk :amis-json="{type: 'qr-code',codeSize: 128,value: url}" />
|
|
|
+ <el-button
|
|
|
+ slot="reference" type="text"
|
|
|
+ style="position: absolute; right: 15px; top: -5px; font-size: 18px; width: 25px"
|
|
|
+ >
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(24,144,255,1)">
|
|
|
+ <path
|
|
|
+ d="M15 3H21V8H19V5H15V3ZM9 3V5H5V8H3V3H9ZM15 21V19H19V16H21V21H15ZM9 21H3V16H5V19H9V21ZM3 11H21V13H3V11Z"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ </el-button>
|
|
|
+ </el-popover>
|
|
|
+ </span>
|
|
|
+ <div slot="tip" class="el-upload__tip" v-show="showTip">
|
|
|
+ 只能上传不超过{{ fileSize }}{{ sizeUnit }}的{{ accept }}图片
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <el-dialog title="图片名称修改" :visible.sync="updateDialogVisible" width="300px" append-to-body>
|
|
|
+ <el-form ref="updateForm" :model="updateForm" label-width="80px">
|
|
|
+ <el-form-item label="图片名称">
|
|
|
+ <el-input v-model="updateForm.fileName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="updateDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="updateFileName">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
+import AmisSdk from "@/components/AmisSdk.vue";
|
|
|
+import { delBySerialNumber, getBySerialNumber, getFileById, updateFileName } from "@/api/common";
|
|
|
+
|
|
|
+const units = {
|
|
|
+ KB: 1024,
|
|
|
+ MB: 1024 * 1024,
|
|
|
+ GB: 1024 * 1024 * 1024
|
|
|
+};
|
|
|
+export default {
|
|
|
+ name: "UploadSign",
|
|
|
+ components: { AmisSdk },
|
|
|
+ props: {
|
|
|
+ value: { type: Array, default: () => [] },
|
|
|
+ type: { type: String, default: "annexpic" },
|
|
|
+ disabled: { type: Boolean, default: false },
|
|
|
+ showTip: { type: Boolean, default: false },
|
|
|
+ limit: { type: Number, default: 1 },
|
|
|
+ accept: { type: String, default: "image/*" },
|
|
|
+ sizeUnit: { type: String, default: "MB" },
|
|
|
+ fileSize: { default: 2 },
|
|
|
+ scanCode: { default: false }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ url: "",
|
|
|
+ uuid: "",
|
|
|
+ fileList: [],
|
|
|
+ uploadHeaders: { "Blade-Auth": "bearer " + getToken() },
|
|
|
+ isScan: false,
|
|
|
+ mobileFileList: [],
|
|
|
+ fileImages: [],
|
|
|
+ updateDialogVisible: false,
|
|
|
+ updateForm: { id: "", fileName: "" }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 判断字符串类型
|
|
|
+ let lowcodeUserInfo = JSON.parse(localStorage.getItem("lowcodeUserInfo")) || "";
|
|
|
+ let tenantId = "";
|
|
|
+ try {
|
|
|
+ tenantId = lowcodeUserInfo.tenantId;
|
|
|
+ } catch {
|
|
|
+ }
|
|
|
+ this.uuid = g.guid(8);
|
|
|
+ if (process.env.NODE_ENV === "development") {
|
|
|
+ this.url = this.define.comUrl + "/work/uploadSign.html?uid=" + "uid" + "&uuid=" + this.uuid + "&tenantId=" + tenantId;
|
|
|
+ } else {
|
|
|
+ this.url = document.location.origin + "/work/uploadSign.html?uid=" + "uid" + "&uuid=" + this.uuid + "&tenantId=" + tenantId;
|
|
|
+ }
|
|
|
+ this.fileList = this.value
|
|
|
+ .filter((o) => !o.url && !o.type)
|
|
|
+ .map((v) => ({ type: "new", url: v }));
|
|
|
+ console.log('上传签名url：')
|
|
|
+ console.log(this.url);
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ allFileList() {
|
|
|
+ return g.removeRepeatAttr([...this.fileList, ...this.mobileFileList], "url");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ allFileList: {
|
|
|
+ async handler(val) {
|
|
|
+ if (val.length > 0) {
|
|
|
+ let list = {};
|
|
|
+ await getFileById(val.map((o) => o.url)).then((res) => {
|
|
|
+ list = res.data.data;
|
|
|
+ });
|
|
|
+ this.fileImages = val.map((o) => {
|
|
|
+ if (list[o.url]) {
|
|
|
+ return {
|
|
|
+ name: o.url,
|
|
|
+ fileName: list[o.url].fileName || "",
|
|
|
+ fileId: o.url,
|
|
|
+ url: "api/file/getFileInputStreamById/" + o.url
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }).filter((l) => l !== undefined);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ handler(val) {
|
|
|
+ // console.log(val)
|
|
|
+ // this.fileList = val
|
|
|
+ // .filter((o) => !o.url && !o.type)
|
|
|
+ // .map((v) => {
|
|
|
+ // return {
|
|
|
+ // url: v
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // try {
|
|
|
+ // const toObj = JSON.parse(val)
|
|
|
+ // if (Array.isArray(toObj) && toObj[0].url) {
|
|
|
+ // this.fileList = toObj
|
|
|
+ // }
|
|
|
+ // console.log(toObj)
|
|
|
+ // } catch {
|
|
|
+ // if (Array.isArray(val) && val[0] && val[0].url) {
|
|
|
+ // this.fileList = val
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beforeUpload(file) {
|
|
|
+ const unitNum = units[this.sizeUnit];
|
|
|
+ if (!this.fileSize) return true;
|
|
|
+ let isRightSize = file.size / unitNum < this.fileSize;
|
|
|
+ if (!isRightSize) {
|
|
|
+ this.$message.error(`文件大小超过${this.fileSize}${this.sizeUnit}`);
|
|
|
+ }
|
|
|
+ return isRightSize;
|
|
|
+ },
|
|
|
+ handleError(res, file, fileList) {
|
|
|
+ this.$message({ message: res, type: "warning", duration: 5000 });
|
|
|
+ },
|
|
|
+ handleSuccess(res, file, fileList) {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.fileList.push({
|
|
|
+ url: res.data.id,
|
|
|
+ urlName: res.data.fileName,
|
|
|
+ type: "new"
|
|
|
+ });
|
|
|
+ this.$emit("input", this.fileList);
|
|
|
+ this.$emit("change", this.fileList);
|
|
|
+ } else {
|
|
|
+ this.$message({ message: res.msg, type: "error", duration: 5000 });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ this.$message.warning(`当前限制最多可以上传${this.limit}张图片`);
|
|
|
+ },
|
|
|
+ handlePictureCardPreview(index) {
|
|
|
+ this.$refs["image" + index][0].clickHandler();
|
|
|
+ },
|
|
|
+ handleRemove(index) {
|
|
|
+ const url = this.allFileList[index];
|
|
|
+ this.fileList.splice(index, 1);
|
|
|
+ this.fileImages.splice(index, 1);
|
|
|
+ this.$emit("input", this.fileList);
|
|
|
+ // delBySerialNumber(url.url, url.url).then((res) => {})
|
|
|
+ },
|
|
|
+ handleUpdate(file, index) {
|
|
|
+ this.updateForm = {
|
|
|
+ id: "",
|
|
|
+ fileName: ""
|
|
|
+ };
|
|
|
+ this.updateDialogVisible = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.updateForm.id = file.fileId;
|
|
|
+ this.updateForm.fileName = file.fileName;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ updateFileName() {
|
|
|
+ let params = {
|
|
|
+ id: this.updateForm.id,
|
|
|
+ fileName: this.updateForm.fileName
|
|
|
+ };
|
|
|
+ updateFileName(params).then(res => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.$message({ message: res.data.msg, type: "success", duration: 1500 });
|
|
|
+ this.fileList = this.fileImages.map((o) => {
|
|
|
+ return { type: "new", url: o.fileId };
|
|
|
+ });
|
|
|
+ this.updateDialogVisible = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleMobileRemove(index) {
|
|
|
+ const url = this.mobileFileList[index].url;
|
|
|
+ this.mobileFileList.splice(index, 1);
|
|
|
+ this.$emit("input", this.fileList);
|
|
|
+ delBySerialNumber(this.uuid, url).then((res) => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getImgUrl(url) {
|
|
|
+ let ImgUrl;
|
|
|
+ if (!g.isLeftLike(url, "http://")) {
|
|
|
+ if (process.env.NODE_ENV === "development") {
|
|
|
+ ImgUrl = this.define.comUrl + "/";
|
|
|
+ return ImgUrl + url;
|
|
|
+ } else {
|
|
|
+ ImgUrl = document.location.origin + "/";
|
|
|
+ return ImgUrl + url;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return url;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getImgList(list) {
|
|
|
+ return list.map((o) => {
|
|
|
+ let ImgUrl;
|
|
|
+ if (!g.isLeftLike(o.url, "http://")) {
|
|
|
+ if (process.env.NODE_ENV === "development") {
|
|
|
+ ImgUrl = this.define.comUrl + "/";
|
|
|
+ return ImgUrl + o.url;
|
|
|
+ } else {
|
|
|
+ ImgUrl = document.location.origin + "/";
|
|
|
+ return ImgUrl + o.url;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return o.url;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ scanHidden() {
|
|
|
+ if (this.interval) {
|
|
|
+ clearInterval(this.interval);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 扫一扫弹出二维码
|
|
|
+ scanClick() {
|
|
|
+ this.isScan = true;
|
|
|
+ // 定时运行getMobileFileList
|
|
|
+ this.interval = setInterval(() => {
|
|
|
+ this.getMobileFileList();
|
|
|
+ }, 3000);
|
|
|
+ },
|
|
|
+ getMobileFileList() {
|
|
|
+ getBySerialNumber(this.uuid).then((res) => {
|
|
|
+ if (res.data.data.length) {
|
|
|
+ this.mobileFileList = res.data.data.map((o) => {
|
|
|
+ return {
|
|
|
+ url: o.id,
|
|
|
+ urlName: o.fileName,
|
|
|
+ type: "new"
|
|
|
+ };
|
|
|
+ });
|
|
|
+ if (this.fileList.length < 1) {
|
|
|
+ this.fileList = this.mobileFileList;
|
|
|
+ this.$emit("input", this.fileList);
|
|
|
+ } else {
|
|
|
+ this.$emit("input", g.removeRepeatAttr([...this.fileList, ...this.mobileFileList], "url"));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+:deep(.el-upload-list--picture-card .el-upload-list__item) {
|
|
|
+ position: relative;
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: revert;
|
|
|
+ margin-bottom: 25px;
|
|
|
+}
|
|
|
+:deep(.el-upload--picture-card) {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.upload-btn {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+</style>
|
