quanyawei
2023-10-27 52d463e03c1f074099ed8e8a6b7c3ddde52d2708
pages/actionChange/components/fileUpload.vue
New file
@@ -0,0 +1,79 @@
<template>
   <view class="">
      <cl-upload v-model="fileList" :action="uploadTermExcelUrl" cloud-type="other" :data="{ sysCode }"
         :headers="hearder" :image-form-data="{
            compress: true,
         }" :list-style="{
            columns: 3,
            columnGap: '10rpx',
            rowGap: '10rpx',
            padding: '10rpx',
            radius: '20rpx'
         }" use-before-delete @beforeDelete="beforeDelete" @onSuccess="onSuccess" />
      </cl-upload>
   </view>
</template>
<script>
   export default {
      props: {
         sysCode: {
            type: String,
         },
      },
      data() {
         return {
            fileList: [],
            upLoadList: [],
            beforFileList: [],
            baseUrl: this.$storage.get('baseUrl'),
            token: '',
         }
      },
      created() {
         this.token = uni.getStorageSync('tonken')
         console.log('tonken', this.token)
      },
      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>