标签编辑

2022-02-16 18:09:58 +08:00
parent 21e51bf25b
commit e703c1cc63
5 changed files with 671 additions and 2 deletions
@@ -183,7 +183,7 @@
          </div>
        </a-row>
      </div>
-      <uploadFile ref="uploadFile" :disabled="disabled" @uploadSuccess="uploadSuccess"></uploadFile>
+      <uploadFile ref="uploadFile" @uploadSuccess="uploadSuccess"></uploadFile>
    </a-form-model>
  </a-spin>
 </template>
@@ -0,0 +1,148 @@
+<template>
+    <div class="ocr-upload">
+      <a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title">
+        <a-upload-dragger
+          accept='*.*'
+          :disabled="disabled"
+          class="ant-upload-list"
+          name="file"
+          :file-list="myfileList"
+          :multiple="true"
+          :action = 'uploadAction'
+          :headers="headers"
+          :before-upload="beforeUpload"
+          :remove='remove'
+          @change="handleChange">
+          <p><a-icon style="font-size: 67px;color: #c0c4cc;" type="cloud-upload" /></p>
+          <p class="ant-upload-text" style="font-size: 14px;line-height: 30px">点击上传</p>
+        </a-upload-dragger>
+      </a-modal>
+    </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import { ACCESS_TOKEN } from "@/store/mutation-types"
+  export default {
+    name: 'ocrUpload',
+    props:['disableds','disabled','thisFileUploadUrl','readonly','thisFileType'],
+    data(){
+      return{
+        visible:false,
+        uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
+        downLoadFileUrl:window._CONFIG['domianURL']+'/sys/common/static',
+        myfileList:[],
+        fileList:[],
+        fileTypeSatus:false,
+        headers:{},
+        title:'上传文件'
+      }
+    },
+    created(){
+      const token = Vue.ls.get(ACCESS_TOKEN);
+      this.headers = {"X-Access-Token":token};
+      this.containerId = 'container-ty-'+new Date().getTime();
+    },
+    mounted(){
+      // console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
+    },
+    methods:{
+      beforeUpload(file) {
+        console.log(file)
+        // let thisFileType = this.thisFileType.replace(/\s+/g, "");
+        this.fileTypeSatus = true;
+        this.$message.destroy()
+        // 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
+        this.errorMessage = file.name + "文件大小超出100MB限制, 请压缩或降低文件质量!";
+
+      },
+      remove(){
+        this.fileTypeSatus = true;
+      },
+      handleChange(info) {
+        console.log('info',info)
+        let { file } = info;
+        const status = info.file.status;
+        info.fileList.forEach((val,index)=>{
+          if(val.response && !val.response.result){
+            this.$message.error(val.response.message);
+            info.fileList.splice(index,1)
+          }
+        })
+        if (this.fileTypeSatus) {
+          if (file.size > 100000000) {
+            this.$message.error(this.errorMessage)
+            return
+          }else {
+            if (status === 'error') {
+              this.$emit('uploadSuccess', this.fileList)
+              this.$message.destroy()
+              this.$message.error(`${info.file.name} 文件上传失败。`);
+            } else if (status === 'removed') {
+              this.myfileList = info.fileList;
+              this.fileList = []
+              this.myfileList.forEach((res) => {
+                if (res.response) {
+                  this.fileList.push(res.response.result)
+                } else {
+                  this.fileList.push(res)
+                }
+              })
+              this.$emit('uploadSuccess', this.fileList)
+              if(this.myfileList.length > 0){
+                this.$message.destroy()
+                this.$message.success(`${info.file.name} 删除成功。`);
+              }
+            } else if (status === 'done') {
+              this.fileList = []
+              this.myfileList = info.fileList;
+              console.log('file3333',info.fileList)
+              if (info.fileList.length > 20) {
+                info.fileList.splice(20)
+                // this.myfileList = info.fileList;
+
+                this.myfileList.forEach((res) => {
+                  if (res.response) {
+                    this.fileList.push(res.response.result)
+                  } else {
+                    this.fileList.push(res)
+                  }
+                })
+                console.log('file1111',this.fileList)
+                this.$emit('uploadSuccess', this.fileList)
+                this.$message.destroy()
+                this.$message.error('最多只能上传二十个');
+                return
+              }
+              console.log('my222',this.myfileList)
+              this.myfileList.forEach((res) => {
+                if (res.response) {
+                  this.fileList.push(res.response.result)
+                  console.log('flist',res.response)
+                } else {
+                  this.fileList.push(res)
+                }
+              })
+
+              if(this.myfileList.length > 0){
+                this.$emit('uploadSuccess', this.fileList)
+                this.$message.destroy()
+                this.$message.success(`${info.file.name} 文件上传成功。`);
+              }
+            } else if (status === 'uploading') {
+              this.myfileList = info.fileList;
+              this.$emit('uploadSuccess')
+              // this.$message.success(`${info.file.name} 文件上传成功。`);
+            }
+          }
+        }else{
+          this.$message.warning('不支持上传该类型的文件!')
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>