quanyawei
2023-10-20 d8b41fff43a2cee6a8f714ffa807623b15803786
pages/actionChange/components/fileUpload.vue
New file
@@ -0,0 +1,87 @@
<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: this.$storage.get('token'),
      }
   },
   computed: {
      uploadTermExcelUrl() {
         return `${this.baseUrl}/file/upload` || ''
      },
      hearder() {
         let obj = { token: this.token, Authorization: this.token }
         return obj
      },
   },
   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)
               }
            }
         })
      },
   },
}
</script>
<style></style>