quanyawei
2023-10-27 52d463e03c1f074099ed8e8a6b7c3ddde52d2708
pages/actionChange/components/fileUpload.vue
@@ -1,87 +1,79 @@
<template>
   <view class="">
      <cl-upload
         v-model="fileList"
         :action="uploadTermExcelUrl"
         cloud-type="other"
         :data="{ sysCode }"
         :headers="hearder"
         :image-form-data="{
      <cl-upload v-model="fileList" :action="uploadTermExcelUrl" cloud-type="other" :data="{ sysCode }"
         :headers="hearder" :image-form-data="{
            compress: true,
         }"
         :list-style="{
         }" :list-style="{
            columns: 3,
            columnGap: '10rpx',
            rowGap: '10rpx',
            padding: '10rpx',
            radius: '20rpx'
         }"
         use-before-delete
         @beforeDelete="beforeDelete"
         @onSuccess="onSuccess"
      />
         }" use-before-delete @beforeDelete="beforeDelete" @onSuccess="onSuccess" />
      </cl-upload>
   </view>
</template>
<script>
export default {
   props: {
      sysCode: {
         type: String,
   export default {
      props: {
         sysCode: {
            type: String,
         },
      },
   },
   data() {
      return {
         fileList: [],
         upLoadList: [],
         beforFileList: [],
         baseUrl: this.$storage.get('baseUrl'),
         token: this.$storage.get('token'),
      }
   },
   computed: {
      uploadTermExcelUrl() {
         return `${this.baseUrl}/file/upload` || ''
      data() {
         return {
            fileList: [],
            upLoadList: [],
            beforFileList: [],
            baseUrl: this.$storage.get('baseUrl'),
            token: '',
         }
      },
      hearder() {
         let obj = { token: this.token, Authorization: this.token }
         return obj
      created() {
         this.token = uni.getStorageSync('tonken')
         console.log('tonken', this.token)
      },
   },
   methods: {
      onSuccess(res) {
         console.log(res.data.fileId)
         let fileId = res.data.fileId
         let name = res.data.fileType === 1 ? 'name.png' : ''
         this.fileList.push(`${this.baseUrl}/file/preview/${fileId}?${name}`) // 原图
         this.upLoadList.push(res.data)
         console.log(this.fileList)
         this.$emit('handleFile', this.upLoadList)
      },
      /**
       * 删除前钩子
       * @param {Object} item 当前删除的图片或者视频信息
       * @param {Number} index 当前删除的图片或视频索引
       * @param {Function} next 调用此函数继续执行组件删除逻辑
       * */
      beforeDelete(item, index, next) {
         uni.showModal({
            title: '提示信息',
            content: '确定要删除这个文件嘛?',
            success: res=> {
               if (res.confirm) {
                  this.fileList.splice(index, 1)
                  this.upLoadList.splice(index, 1)
                  console.log('this.fileList', this.upLoadList)
                   this.$emit('handleFile', this.upLoadList)
               }
      computed: {
         uploadTermExcelUrl() {
            return `${this.baseUrl}/file/upload` || ''
         },
         hearder() {
            let obj = {
               token: this.token,
               Authorization: this.token
            }
         })
            return obj
         },
      },
   },
}
      methods: {
         onSuccess(res) {
            let fileId = res.data.fileId
            let name = res.data.fileType === 1 ? 'name.png' : ''
            this.fileList.push(`${this.baseUrl}/file/preview/${fileId}?${name}`) // 原图
            this.upLoadList.push(res.data)
            this.$emit('handleFile', this.upLoadList)
         },
         /**
          * 删除前钩子
          * @param {Object} item 当前删除的图片或者视频信息
          * @param {Number} index 当前删除的图片或视频索引
          * @param {Function} next 调用此函数继续执行组件删除逻辑
          * */
         beforeDelete(item, index, next) {
            uni.showModal({
               title: '提示信息',
               content: '确定要删除这个文件嘛?',
               success: res => {
                  if (res.confirm) {
                     this.fileList.splice(index, 1)
                     this.upLoadList.splice(index, 1)
                     console.log('this.fileList', this.upLoadList)
                     this.$emit('handleFile', this.upLoadList)
                  }
               }
            })
         },
      },
   }
</script>
<style></style>
<style></style>