From 23412e0effa27d5d0f79f5796bc4e738cf8cd1fc Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: Fri, 03 Mar 2023 16:08:49 +0800
Subject: [PATCH] 更新
---
src/components/uploaderImg/index.vue | 193 +++++++++++++++++++++++++++++++++++------------
1 files changed, 143 insertions(+), 50 deletions(-)
diff --git a/src/components/uploaderImg/index.vue b/src/components/uploaderImg/index.vue
index b769025..f044082 100644
--- a/src/components/uploaderImg/index.vue
+++ b/src/components/uploaderImg/index.vue
@@ -1,12 +1,13 @@
<template>
<el-upload
- v-model:file-list="fileList"
- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
- list-type="picture-card"
- :on-preview="handlePictureCardPreview"
- :on-remove="handleRemove"
- :on-success="successFile"
- :on-error="errorFile"
+ v-model:file-list="fileList"
+ :disabled="disabled"
+ :http-request="uploadSectionFile"
+ list-type="picture-card"
+ :on-preview="handlePictureCardPreview"
+ :on-remove="handleRemove"
+ :on-success="successFile"
+ :on-error="errorFile"
>
<el-icon><Plus /></el-icon>
</el-upload>
@@ -16,50 +17,142 @@
</el-dialog>
</template>
<script lang="ts">
- import { ref,defineComponent } from 'vue'
- import { Plus } from '@element-plus/icons-vue'
- import type { UploadProps, UploadUserFile } from 'element-plus'
+import axios from 'axios';
+import { ref, defineComponent,onMounted,watch } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+import type { UploadProps, UploadUserFile } from 'element-plus';
+import { ElMessage } from 'element-plus';
+import { goalManagementApi } from '/@/api/goalManagement';
- export default defineComponent({
- props: {
- // svg 图标组件名字
- fileList: {
- type: Array,
- },
+export default defineComponent({
+ props: {
+ // svg 图标组件名字
+ fileList: {
+ type: Array,
},
- components: {
- Plus
+ disabled: {
+ type: Boolean,
+ default: () => false,
},
- setup() {
-
- const dialogImageUrl = ref('')
- const dialogVisible = ref(false)
-
- const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
- console.log(uploadFile, uploadFiles)
- }
-
- const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
- dialogImageUrl.value = uploadFile.url!
- dialogVisible.value = true
- }
-
- const successFile = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
- console.log(response, uploadFile,uploadFiles)
- }
- const errorFile = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
- console.log(error, uploadFile,uploadFiles)
- }
-
-
- return {
- dialogImageUrl,
- dialogVisible,
- handleRemove,
- handlePictureCardPreview,
- successFile,
- errorFile
- };
+ systemName: {
+ type: String,
+ default: () => '',
},
- });
-</script>
\ No newline at end of file
+ },
+ components: {
+ Plus,
+ },
+ setup(props, { emit }) {
+ const dialogImageUrl = ref('');
+ const dialogVisible = ref(false);
+
+ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+ console.log(uploadFile, uploadFiles);
+ };
+
+ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
+ alert(1)
+ dialogImageUrl.value = uploadFile.url;
+ dialogVisible.value = true;
+ };
+
+ const successFile = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+ console.log(response, uploadFile, uploadFiles);
+ };
+ const errorFile = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+ console.log(error, uploadFile, uploadFiles);
+ };
+ watch(props.fileList, (val) => {
+ viewList.value = val
+ // searchFile()
+ });
+ onMounted(() => {
+ if(props.fileList){
+ viewList.value = props.fileList
+ // searchFile()
+ }else {
+ viewList.value = []
+ }
+
+ });
+ const newFileList = ref([])
+ const viewList = ref([])
+ const searchFile = async () => {
+ for(var a = 0;a<props.fileList.length;a++){
+ await goalManagementApi()
+ .searchFile(props.fileList[a].fileName)
+ .then((res) => {
+ props.fileList[a].url = res.data
+ })
+ }
+ };
+ const uploadSectionFile = (param) => {
+ let form = new FormData();
+ form.append('file', param.file);
+ //组装文件名（传入后缀名）
+ var fileName1 = getFileName(param.file.type.split('/')[1], 1);
+ var fileName2 = getFileName(param.file.type.split('/')[1], 2);
+ goalManagementApi()
+ .beforeUploadFile(fileName1, fileName2)
+ .then((res) => {
+ // 转换形式
+ const reader = new FileReader();
+ reader.readAsArrayBuffer(param.file);
+ // 上传图片
+ reader.onload = () => { // 上传图片接口 url:上传图片地址 修改请求头
+ axios.put(res.data.uploadUrl, reader.result,
+ {
+ header:
+ { "Content-Type": "multipart/form-data" }
+ }
+ )
+ .then(res1 =>
+ {
+ props.fileList[props.fileList.length-1].fileName=res.data.fileName
+ props.fileList[props.fileList.length-1].fileUrl=''
+ emit('successUploader',props.fileList);
+ ElMessage({
+ showClose: true,
+ message: '上传成功',
+ type: 'success',
+ });
+ })
+ };
+ });
+ };
+ const getFileName = (suffix, type) => {
+ var projectName = props.systemName;
+ var date = getNowDate();
+ var fileName1 = projectName + '/' + date + '_';
+ var fileName2 = '.' + suffix;
+ if (type == 1) {
+ return fileName1;
+ } else if (type == 2) {
+ return fileName2;
+ }
+ return '';
+ };
+
+ //获取当前年月日
+ const getNowDate = () => {
+ var a = new Date().getTime(); //获取到当前时间戳
+ var now = new Date(a); //创建一个指定的日期对象
+ var year = now.getFullYear(); //年份
+ var month = now.getMonth() + 1; //月份（0-11）
+ var date = now.getDate(); //天数（1到31）
+ return year + '-' + month + '-' + date;
+ };
+
+ return {
+ dialogImageUrl,
+ dialogVisible,
+ handleRemove,
+ handlePictureCardPreview,
+ successFile,
+ errorFile,
+ uploadSectionFile,
+ viewList
+ };
+ },
+});
+</script>
--
Gitblit v1.9.2