|
|
@@ -1,136 +0,0 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <el-upload
|
|
|
- ref="upload"
|
|
|
- list-type="text"
|
|
|
- v-bind="upload"
|
|
|
- :disabled="disabled"
|
|
|
- :class="['uploader', uploadDisabled ? 'disabled' : '']"
|
|
|
- :on-success="handleSuccess"
|
|
|
- :on-error="handleError"
|
|
|
- :on-remove="handleRemove"
|
|
|
- :on-preview="handlePreview"
|
|
|
- :before-remove="handleBeforeRemove"
|
|
|
- :before-upload="handleBeforeUpload"
|
|
|
- >
|
|
|
- <el-button size="small" type="primary" :disabled="uploadDisabled">
|
|
|
- {{ uploadDisabled ? '上传数量已达上制' : '上传文件' }} <i class="el-icon-upload el-icon--right"></i
|
|
|
- ></el-button>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { getStore } from '@utils/store';
|
|
|
-import { uuid } from '@utils/util';
|
|
|
-import { removeAttachment } from '@api/api-login';
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'uploadPic',
|
|
|
- props: {
|
|
|
- disabled: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- uploadParams: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {};
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- uploadDisabled() {
|
|
|
- return this.files.length >= this.upload.limit;
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- files: [],
|
|
|
- upload: {
|
|
|
- action: `${process.env.VUE_APP_API_PREFIX + this.uploadParams.url || ''}`,
|
|
|
- headers: {
|
|
|
- Authorization: 'Bearer ' + getStore('accessToken'),
|
|
|
- 'x-upload-type': this.uploadParams.uploadType
|
|
|
- },
|
|
|
- data: this.uploadParams.data || {},
|
|
|
- name: this.uploadParams.name || 'file',
|
|
|
- fileList: this.uploadParams.fileList || [],
|
|
|
- limit: this.uploadParams.limit || 1,
|
|
|
- accept: this.uploadParams.accept || ''
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- uploadParams(val) {
|
|
|
- this.files = [];
|
|
|
- this.upload.fileList = [];
|
|
|
- if (val?.fileList.length > 0) {
|
|
|
- this.files.push(...val.fileList);
|
|
|
- this.upload.fileList = val.fileList;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleBeforeUpload(file) {
|
|
|
- let vm = this;
|
|
|
- vm.upload.headers['x-requestId'] = uuid();
|
|
|
- vm.upload.headers['x-timestamp'] = new Date().getTime();
|
|
|
- },
|
|
|
- handleSuccess(res, file, fileList) {
|
|
|
- let params = {
|
|
|
- id: res.data.id,
|
|
|
- name: res.data.name,
|
|
|
- url: res.data.url,
|
|
|
- virtualName: res.data.virtualName
|
|
|
- };
|
|
|
- this.files.push(params);
|
|
|
- this.$emit('uploadFiles', this.files);
|
|
|
- },
|
|
|
- handleError(e, file, fileList) {
|
|
|
- this.$message.error(JSON.parse(e.message).data);
|
|
|
- },
|
|
|
- handleRemove(file, fileList) {
|
|
|
- let params = {
|
|
|
- id: file.id || file.response.data.id
|
|
|
- };
|
|
|
- removeAttachment(params, { 'x-upload-type': this.uploadParams.uploadType }).then(() => {
|
|
|
- this.files = this.files.filter((o) => o.id !== params.id);
|
|
|
- this.$emit('uploadFiles', this.files);
|
|
|
- });
|
|
|
- },
|
|
|
- handleBeforeRemove(file, fileList) {
|
|
|
- return this.$confirm(`此操作将删除${file.name}, 是否继续?`, '提示', { type: 'warning' });
|
|
|
- },
|
|
|
- handlePreview(file) {
|
|
|
- if (!file) return this.$message.error('无法获取文件信息,无法下载');
|
|
|
- const url = file.url; // 文件的 URL 地址
|
|
|
- const link = document.createElement('a');
|
|
|
- link.href = url;
|
|
|
- link.setAttribute('download', file.name); // 设置文件属性为下载
|
|
|
- link.setAttribute('target', '_blank');
|
|
|
- document.body.appendChild(link); // 将元素插入到 DOM 中
|
|
|
- link.click(); // 模拟点击下载链接进行下载
|
|
|
- document.body.removeChild(link); // 下载完成后移除元素
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- // this.files = [];
|
|
|
- // this.files.push(...this.upload.fileList);
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less">
|
|
|
-.uploader .el-upload:hover {
|
|
|
- border-color: #409eff;
|
|
|
-}
|
|
|
-.disabled .el-upload--picture-card {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-
|
|
|
-.el-upload-list--picture-card .el-upload-list__item {
|
|
|
- width: 187px;
|
|
|
- height: 187px;
|
|
|
-}
|
|
|
-</style>
|