Blame view

antis-ncc-admin/src/components/Upload/UploadFileSingle.vue 2.5 KB
96009bc9   hexiaodong   hxd
1
2
3
4
  <template>
    <div class="UploadFile-container">
      <el-upload :action="define.comUploadUrl+'/'+type" :headers="uploadHeaders"
        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
7606a6ad   “wangming”   fix: update produ...
5
6
        :on-success="handleSuccess" :file-list="fileList" :accept="accept"
        :http-request="customUpload">
96009bc9   hexiaodong   hxd
7
8
9
10
11
12
13
        <el-button size="small" icon="el-icon-upload">选择文件</el-button>
      </el-upload>
    </div>
  </template>
  
  <script>
  import { getDownloadUrl } from '@/api/common'
7606a6ad   “wangming”   fix: update produ...
14
  import { ossUploadFile } from '@/utils/oss-upload'
96009bc9   hexiaodong   hxd
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
  export default {
    name: 'UploadFileSingle',
    props: {
      value: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'workFlow'
      },
      accept: {
        type: String,
        default: '*'
      }
    },
    data() {
      return {
        fileList: [],
        uploadHeaders: { Authorization: this.$store.getters.token }
      }
    },
    watch: {
      value(val) { if (!val) this.fileList = [] }
    },
    methods: {
7606a6ad   “wangming”   fix: update produ...
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
      customUpload(options) {
        var file = options.file
        if (this.type === 'annexpic' || this.type === 'attendancepic') {
          ossUploadFile(file, this.type).then(data => {
            this.fileList = [{ name: file.name, url: '' }]
            this.$emit('input', data.name)
          }).catch(() => {
            this.$message({ message: '上传失败,请重试', type: 'error', duration: 1500 })
          })
        } else {
          var formData = new FormData()
          formData.append('file', file)
          var xhr = new XMLHttpRequest()
          xhr.open('POST', this.define.comUploadUrl + '/' + this.type, true)
          xhr.setRequestHeader('Authorization', this.$store.getters.token)
          xhr.onload = () => {
            if (xhr.status === 200) {
              var res = JSON.parse(xhr.responseText)
              this.handleSuccess(res, { name: file.name, uid: Date.now() }, this.fileList)
            }
          }
          xhr.send(formData)
        }
      },
96009bc9   hexiaodong   hxd
65
      handlePreview(file) {
96009bc9   hexiaodong   hxd
66
67
68
69
70
71
72
      },
      handleRemove(file, fileList) {
        this.fileList = fileList
        this.$emit('input', '')
      },
      handleSuccess(res, file, fileList) {
        if (res.code == 200) {
7606a6ad   “wangming”   fix: update produ...
73
          this.fileList = [{ name: file.name, url: '' }]
96009bc9   hexiaodong   hxd
74
75
76
77
78
79
80
81
82
83
84
85
          this.$emit('input', res.data.name)
        } else {
          this.fileList = fileList.filter(o => o.uid != file.uid)
          this.$message({ message: res.msg, type: 'error', duration: 1500 })
        }
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}?`).catch(() => { });
      }
    }
  }
  </script>