From 4bc116bbcb98b55edb63127c9595950cea8a9549 Mon Sep 17 00:00:00 2001
From: yunuo970428 <405378304@qq.com>
Date: Thu, 4 Jul 2024 09:41:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E5=85=B1=E4=B8=8A=E4=BC=A0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/uploadFile/upload.vue    | 218 ++++++++++++++++++++++
 src/components/uploadFile/uploadImg.vue | 231 ++++++++++++++++++++++++
 2 files changed, 449 insertions(+)
 create mode 100644 src/components/uploadFile/upload.vue
 create mode 100644 src/components/uploadFile/uploadImg.vue

diff --git a/src/components/uploadFile/upload.vue b/src/components/uploadFile/upload.vue
new file mode 100644
index 0000000..4c242e6
--- /dev/null
+++ b/src/components/uploadFile/upload.vue
@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <el-upload class="upload-demo" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData"
+               :on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian"
+               :on-preview="handlePictureCardPreview" :show-file-list="false" :multiple="true">
+      <el-button size="mini" type="primary">上传</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { uploadFile } from '@/api/Common/Upload'
+import { getStorage } from '@/utils/auth.js'
+
+export default {
+  model: {
+    prop: 'name',
+    event: 'change'
+  },
+  props: {
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    bucket: {
+      type: String,
+      default: 'abc'
+    },
+    // 长度
+    width: {
+      type: String,
+      default: '270px'
+    },
+    limit: {
+      type: Number,
+      default: 1
+    },
+    accept: {
+      type: String,
+      default:
+        '.jpg,.jpeg,.png,.JPG,.JPEG'
+    },
+    // 文件名称
+    name: {
+      type: Array,
+      required: true
+    },
+    uploadData: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      dialogImageUrl: '',
+      dialogVisible: false,
+      accessToken: null,
+      uploadFile: uploadFile,
+      fileList_FuJian: [],
+      enclosure: '',
+      file_add: '',
+      file_catch: '',
+      files: [],
+      files_list: [],
+      filedUrl: '',
+      // fileUrl: fileUrl,
+      // showpicture:false,
+      isview: false,
+      nameArr: '',
+      loadding: false,
+      stateName: '',
+      /*  uploadData: { modelSid: '' },*/
+      sid: ''
+    }
+  },
+  watch: {
+    name: {
+      deep: true,
+      immediate: true,
+      handler(newVal, oldVal) {
+        console.log('aaaa1', newVal)
+        this.files = newVal
+        console.log('aaaa2', this.files)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.Init()
+    })
+  },
+  created() {
+    this.uploadFile = uploadFile // 接口
+    this.accessToken = {
+      token: getStorage()
+    }
+  },
+  methods: {
+    // 页面第一次加载
+    Init() {
+      if (this.name !== undefined) {
+        this.files = []
+        for (var i = 0; i < this.name.length; i++) {
+          this.files.push({
+            name: this.name[i],
+            url: this.name[i]
+          })
+        }
+      }
+    },
+    // 上传方案--成功后执行
+    uploadImgSuccess_FuJian(response, file, fileList) {
+      let _this = this
+      console.log('您选择的file:', file)
+      //  console.log('您传递的data:', _this.uploadData)
+      if (file.response.code === '200') {
+        this.loadding = false
+        // 返显图片
+        this.filedUrl = this.fileUrl + file.response.data
+        // var uid = file.response.data
+        const files = []
+        files.push({
+          name: file.response.data.sourceFileName,
+          url: file.response.data.fullUrl,
+          size: file.response.data.size
+        })
+        this.$emit('change', files)
+        this.$emit('eett', files)
+      }
+    },
+    removeImage(file, ImageFileList) {
+      this.files.splice(this.files.indexOf(file), 1)
+      const imgFiles = []
+      this.files.forEach((o) => {
+        imgFiles.push(o.url)
+      })
+      this.$emit('fileChange', this.files)
+    },
+    handleRemove(file, fileList) {
+      console.log('file:' + JSON.stringify(file))
+      console.log('fileList:' + JSON.stringify(fileList))
+      this.enclosure = ''
+      // 1. 保存新增文件id(this.file_add)
+      this.getNewFileId(fileList)
+      // 2. 保存数据库读取的已有文件id(this.file_catch)
+      this.getCatchFileId(file)
+      // 3. 保存并拼接id
+      this.getFileId()
+      // 4. 返回拼接id
+      this.$emit('change', this.enclosure)
+    },
+    // 返回this.file_add(新上传文件的id拼接集合)
+    getNewFileId(fileList) {
+      // debugger
+      this.file_add = ''
+      for (var i = 0; i < fileList.length; i++) {
+        if (fileList[i].response && fileList[i].response.code === '200') {
+          this.file_add = this.file_add + fileList[i].response.data + ','
+        }
+      }
+      if (this.file_add !== '') {
+        this.file_add = this.file_add.substring(0, this.file_add.length - 1)
+      }
+      // console.log('1. this.file_add: ' + this.file_add)
+    },
+    // 返回this.file_catch（数库一寸照的文件的id的拼接集合）
+    getCatchFileId(file) {
+      for (var i = 0; i < this.files_list.length; i++) {
+        if (this.file_catch !== '') {
+          // 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
+          if (this.files_list[i].name === file.name) {
+            // 2. 拆开file_catch到fils_arry
+            var fils_arry = this.file_catch.split(',')
+            // 3. 从fils_arry去除 this.files_list[i].id
+            var arry = []
+            fils_arry.forEach((element) => {
+              // 不加载文件里面的
+              if (element !== this.files_list[i].id) {
+                arry.push(element)
+              }
+            })
+            // 4. 重新拼接成file_catch
+            this.file_catch = arry.join(',')
+          }
+        }
+      }
+      // console.log('2. this.file_catch:' + this.file_catch)
+    },
+    // 保存并拼接id
+    getFileId() {
+      // console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
+      if (this.file_catch !== '') {
+        if (this.file_add !== '') {
+          this.enclosure = this.file_catch + ',' + this.file_add
+        } else {
+          this.enclosure = this.file_catch
+        }
+      } else {
+        this.enclosure = this.file_add
+      }
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+    },
+    // 上传失败
+    uploadError() {
+      this.loadding = false
+    },
+    uploadProgrees(event, file, fileList) {
+      if (Number(event.percent) > 0) {
+        this.loadding = true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/uploadFile/uploadImg.vue b/src/components/uploadFile/uploadImg.vue
new file mode 100644
index 0000000..2721bed
--- /dev/null
+++ b/src/components/uploadFile/uploadImg.vue
@@ -0,0 +1,231 @@
+<template>
+  <div>
+    <el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken"
+               :action="uploadFile" :accept="accept" list-type="picture-card"
+               :file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview"
+               :on-progress="uploadProgrees"
+               :on-error="uploadError" :on-success="uploadImgSuccess_FuJian">
+      <i class="el-icon-plus avatar-uploader-icon"/>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="查看图片">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { uploadFile } from '@/api/Common/Upload'
+import { getStorage } from '@/utils/auth.js'
+
+export default {
+  model: {
+    prop: 'name',
+    event: 'change'
+  },
+  props: {
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    bucket: {
+      type: String,
+      default: 'abc'
+    },
+    // 长度
+    width: {
+      type: String,
+      default: '270px'
+    },
+    limit: {
+      type: Number,
+      default: 1
+    },
+    accept: {
+      type: String,
+      default:
+        '.jpg,.jpeg,.png,'
+    },
+    // 文件名称
+    name: {
+      type: Array,
+      required: true
+    },
+    uploadData: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      dialogImageUrl: '',
+      dialogVisible: false,
+      accessToken: null,
+      uploadFile: uploadFile,
+      fileList_FuJian: [],
+      enclosure: '',
+      file_add: '',
+      file_catch: '',
+      files: [],
+      files_list: [],
+      filedUrl: '',
+      // fileUrl: fileUrl,
+      // showpicture:false,
+      isview: false,
+      nameArr: '',
+      loadding: false,
+      stateName: ''
+    }
+  },
+  watch: {
+    name: {
+      deep: true,
+      immediate: true,
+      handler(newVal, oldVal) {
+        console.log('aaaa1', newVal)
+        console.log('aaaa2', oldVal)
+        this.files = newVal
+        console.log('aaaa2this.files', this.files)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.Init()
+    })
+  },
+  created() {
+    this.uploadFile = uploadFile // 接口
+    this.accessToken = {
+      token: getStorage()
+    }
+  },
+  methods: {
+    // 页面第一次加载
+    Init() {
+      if (this.name !== undefined) {
+        this.files = []
+        for (var i = 0; i < this.name.length; i++) {
+          if (this.name[i].url !== null && this.name[i].url !== undefined) {
+            this.files.push({
+              name: this.name[i].name,
+              url: this.name[i].url
+            })
+          } else {
+            this.files.push({
+              name: this.name[i],
+              url: this.name[i]
+            })
+          }
+        }
+      }
+    },
+    // 上传方案--成功后执行
+    uploadImgSuccess_FuJian(response, file, fileList) {
+      console.log('您选择的file:', file)
+      if (file.response.code === '200') {
+        this.loadding = false
+        // 返显图片
+        this.filedUrl = this.fileUrl + file.response.data
+        // var uid = file.response.data
+        this.files.push({
+          name: file.response.data.sourceFileName,
+          url: file.response.data.fullUrl,
+          filePath: file.response.data.filePath,
+          size: file.response.data.size
+        })
+        this.$emit('change', this.files)
+        this.$emit('eett', this.files)
+      }
+    },
+
+    removeImage(file, ImageFileList) {
+      this.files.splice(this.files.indexOf(file), 1)
+      const imgFiles = []
+
+      this.files.forEach((o) => {
+        imgFiles.push(o.url)
+      })
+      this.$emit('fileChange', this.files)
+      this.$emit('change', this.files)
+    },
+    handleRemove(file, fileList) {
+      console.log('file:' + JSON.stringify(file))
+      console.log('fileList:' + JSON.stringify(fileList))
+      this.enclosure = ''
+      // 1. 保存新增文件id(this.file_add)
+      this.getNewFileId(fileList)
+      // 2. 保存数据库读取的已有文件id(this.file_catch)
+      this.getCatchFileId(file)
+      // 3. 保存并拼接id
+      this.getFileId()
+      // 4. 返回拼接id
+      this.$emit('change', this.enclosure)
+    },
+    // 返回this.file_add(新上传文件的id拼接集合)
+    getNewFileId(fileList) {
+      // debugger
+      this.file_add = ''
+      for (var i = 0; i < fileList.length; i++) {
+        if (fileList[i].response && fileList[i].response.code === '200') {
+          this.file_add = this.file_add + fileList[i].response.data + ','
+        }
+      }
+      if (this.file_add !== '') {
+        this.file_add = this.file_add.substring(0, this.file_add.length - 1)
+      }
+      // console.log('1. this.file_add: ' + this.file_add)
+    },
+    // 返回this.file_catch（数库一寸照的文件的id的拼接集合）
+    getCatchFileId(file) {
+      for (var i = 0; i < this.files_list.length; i++) {
+        if (this.file_catch !== '') {
+          // 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
+          if (this.files_list[i].name === file.name) {
+            // 2. 拆开file_catch到fils_arry
+            var fils_arry = this.file_catch.split(',')
+            // 3. 从fils_arry去除 this.files_list[i].id
+            var arry = []
+            fils_arry.forEach((element) => {
+              // 不加载文件里面的
+              if (element !== this.files_list[i].id) {
+                arry.push(element)
+              }
+            })
+            // 4. 重新拼接成file_catch
+            this.file_catch = arry.join(',')
+          }
+        }
+      }
+      // console.log('2. this.file_catch:' + this.file_catch)
+    },
+    // 保存并拼接id
+    getFileId() {
+      // console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
+      if (this.file_catch !== '') {
+        if (this.file_add !== '') {
+          this.enclosure = this.file_catch + ',' + this.file_add
+        } else {
+          this.enclosure = this.file_catch
+        }
+      } else {
+        this.enclosure = this.file_add
+      }
+    },
+    handlePictureCardPreview(file) {
+      this.dialogVisible = true
+      this.dialogImageUrl = file.url
+    },
+    // 上传失败
+    uploadError() {
+      this.loadding = false
+    },
+    uploadProgrees(event, file, fileList) {
+      if (Number(event.percent) > 0) {
+        this.loadding = true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>