清哥的小屋

1
<template>
2
    <div class="uploadFile" style="margin-top:15px;">
3
      <!-- 上传组件 -->
4
        <el-upload
5
          v-loading="loading"
6
          multiple
7
          ref="upload"
8
          :action="actionUrl"
9
          :limit="limit"
10
          :accept="accepted"
11
          :auto-upload="true"
12
          :file-list="fileListData"
13
          :list-type="listType"
14
          :before-upload="handleBeforeUpload"
15
          :on-preview="handlePictureCardPreview"
16
          :on-exceed="handleExceed"
17
          :on-progress="handleUploadProgress"
18
          :on-success="handleSuccess"
19
          :on-error="handleError"
20
          :http-request="handleRequest"
21
          :element-loading-text="loadingText"
22
          :class="isPreview?'hide_box':''"
23
        >
24
            <i class="el-icon-plus" slot="default"></i>
25
            <div slot="file" slot-scope="{file}">
26
              <!-- 图片显示正常的缩略图 -->
27
              <img
28
                v-if="allPicType.includes(file.name.split('.')[1])&&imgConfigEmpty"
29
                class="el-upload-list__item-thumbnail"
30
                :src="file.url" alt="图片预览失败"
31
              >
32
              <!-- 非图片显示默认缩略图 -->
33
              <img
34
                v-if="!allPicType.includes(file.name.split('.')[1])&&imgConfigEmpty"
35
                class="el-upload-list__item-thumbnail"
36
                src="../../assets/images/common/defaultFilePic.png" alt="图片预览失败"
37
              >
38
              <!-- 预览，上传，删除文件 -->
39
              <span class="el-upload-list__item-actions">
40
                <span
41
                  class="el-upload-list__item-preview"
42
                  @click="handlePictureCardPreview(file)"
43
                >
44
                  <i class="el-icon-zoom-in"></i>
45
                </span>
46
                <span class="el-upload-list__item-delete">
47
                  <a :href="file.url" download style="color: #fff;">
48
                    <i class="el-icon-download"></i>
49
                  </a>
50
                </span>
51
                <span
52
                  v-if="isDisabledDel"
53
                  class="el-upload-list__item-delete"
54
                  @click="removeFile(file)"
55
                >
56
                  <i class="el-icon-delete"></i>
57
                </span>
58
              </span>
59
            </div>
60
            <!-- 上传提示语 -->
61
            <div slot="tip" class="el-upload__tip" v-if="!fileListData.length">
62
                {{ uploadTips }}
63
            </div>
64
        </el-upload>
65
        <!-- 预览时的文件名称样式 -->
66
        <template v-if="fileListData.length">
67
          <span v-for="(name,ind) in fileListData" :key="name + ind" class="fileName" :style="{left: `${ind * 155 + 'px' }`}">{{ name.name }}</span>
68
        </template>
69
        <!-- 上传是的文件名称样式 -->
70
        <template v-else>
71
          <span v-for="(name,ind) in fileNames" :key="name + ind" class="fileName" :style="{left: `${ind * 155 + 'px' }`}">{{ name }}</span>
72
        </template>
73
        <!-- 预览图片 -->
74
        <el-dialog :visible.sync="dialogVisible" title="查看" append-to-body >
75
            <img width="100%" :src="dialogImageUrl" alt="" />
76
        </el-dialog>
77
    </div>
78
</template>

1
import Vue from 'vue';
2
// import UUID from 'uuid'; 上传是所需要的一个随机生成的id
3

4
export default {
5
  props: {
6
    fileListData: { // 合同文件列表
7
      type: Array,
8
      default: () => {
9
        return [];
10
      }
11
    },
12
    isPreview: { // 是否需要隐藏上传操作
13
      type: Boolean,
14
      default: false
15
    },
16
    limit: { // 限制文件上传个数
17
      type: Number,
18
      default: 1
19
    },
20
    noLimitSize: { // 是否限制文件上传大小
21
      type: Boolean,
22
      default: true
23
    },
24
    fileType: { // 文件类型
25
      type: Array,
26
      default: function() {
27
        return ['png', 'jpg', 'jpeg'];
28
      }
29
    },
30
    url: { // 文件上传的地址
31
      type: String,
32
      default: ''
33
    },
34
    loadingText: { // 加载文案
35
      type: String,
36
      default: '加载中...'
37
    },
38
    // * 文件的大小个单位   [3,'kb']或[3.'m']
39
    fileSize: {
40
      type: Array,
41
      default: () => {
42
        return [];
43
      }
44
    },
45
    listType: { // 文件列表的类型 ('text' 'picture' 'picture-car')
46
      type: String,
47
      default: () => {
48
        return 'picture-car';
49
      }
50
    },
51
    headers: { // 设置上传的请求头部
52
      type: Object,
53
      default: () => {
54
        return {};
55
      }
56
    },
57
    isDisabledDel: { // 是否展示删除功能
58
      type: Boolean,
59
      default: false
60
    },
61
    isShowFileName: { // 是否展示文件名称
62
      type: Boolean,
63
      default: true
64
    }
65
  },
66
  data() {
67
    return {
68
      dialogVisible: false, // 图片预览框
69
      dialogImageUrl: '', // 图片预览路径
70
      uploadTips: '', // 提示文案
71
      accepted: '', // 支持上传的文件类型
72
      allPicType: ['jpg', 'png', 'jpeg'], // * 图片使用弹窗预览
73
      loading: false, // 加载
74
      form: {}, // 上传金山云参数
75
      imgConfig: {}, // 上传金山云参数
76
      actionUrl: '', // 上传服务路径
77
      fileLists: [], // 当前上传的文件
78
      fileNames: [] // 当前上传的文件名称
79
    };
80
  },
81
  computed: {
82
    imgConfigEmpty() {
83
      return JSON.stringify(this.imgConfig) !== '{}';
84
    }
85
  },
86
  mounted() {
87
    this.getImgConfig();
88
    this.init();
89
  },
90
  methods: {
91
    init() {
92
      // 提示内容
93
      if (!this.fileType.length) {
94
        if (!this.fileSize.length) {
95
          this.uploadTips = `最多支持上传${this.limit}个` + '可以上传jpg/png/jpeg/doc/docx/pdf文件';
96
        } else {
97
          this.uploadTips = `最多支持上传${this.limit}个` + '可以上传jpg/png/jpeg/doc/docx/pdf文件,且文件不能大于' + this.fileSize[0] + this.fileSize[1];
98
        }
99
      } else {
100
        this.uploadTips = `最多支持上传${this.limit}个` + '可以上传';
101
        if (this.fileSize.length === 0) {
102
          for (let i = 0; i < this.fileType.length; i++) {
103
            if (i === this.fileType.length - 1) {
104
              this.uploadTips += this.fileType[i] + '文件';
105
            } else {
106
              this.uploadTips += this.fileType[i] + '/';
107
            }
108
          }
109
        } else {
110
          for (let i = 0; i < this.fileType.length; i++) {
111
            if (i === this.fileType.length - 1) {
112
              this.uploadTips += this.fileType[i] + '文件,且文件不能大于' + this.fileSize[0] + this.fileSize[1];
113
            } else {
114
              this.uploadTips += this.fileType[i] + '/';
115
            }
116
          }
117
        }
118
      }
119
      // 允许上传的文件类型
120
      if (this.fileType.length) this.accepted = this.fileType.join(',');
121
    },
122
    handlePictureCardPreview(file) { // 预览文件
123
      if (!file.url) {
124
        this.$message.error('下载失败');
125
        return;
126
      }
127
      const type = file.name.split('.')[1];
128
      if (['jpg', 'png', 'jpeg'].includes(type)) {
129
        this.dialogImageUrl = file.url;
130
        this.dialogVisible = true;
131
        return;
132
      }
133
      // 判断文件类型
134
      if (type === 'doc' || type === 'docx') {
135
        // 在当前浏览器直接下载
136
        document.location.href = file.url;
137
      } else {
138
        // 图片在浏览器打开 新的页面展示
139
        window.open(file.url, '预览');
140
      }
141
    },
142
    handlerUploadErr() { // 上传失败提示
143
      if (!((Object.keys(this.imgConfig)).length)) {
144
        this.$message.error('上传文件失败，请稍后再试');
145
        return false;
146
      }
147
    },
148
    getImgConfig() { //* 获取金山云权限
149
      Vue.http
150
        .get('url')
151
        .then(config => {
152
          if (config.code === 0) {
153
            this.imgConfig = config.data;
154
            this.actionUrl = `https://${config.data.host}`;
155
          } else {
156
            this.$message.error('网络错误，文件将无法上传');
157
            this.loading = false;
158
            return false;
159
          }
160
        }).catch(err => {
161
          this.$handleError(err, '网络错误，文件将无法上传');
162
          this.loading = false;
163
        });
164
    },
165
    handleRequest(fileObj) { // * 将文件上传至金山云
166
      this.getImgConfig(); // ! 防止金山云凭证过期
167
      this.handlerUploadErr(); // 获取金山云权限失败禁止继续上传
168
      let imgConfig = this.imgConfig;
169
      let form = this.form;
170
      let formData = new FormData();
171
      // 处理参数
172
      formData.append('key', form.keyPrefix + '/' + form.key);
173
      formData.append('KSSAccessKeyId', form.KSSAccessKeyId);
174
      formData.append('policy', form.policy);
175
      formData.append('signature', form.signature);
176
      formData.append('file', form.file);
177
      this.loading = true;
178
      let hostAddress = imgConfig.host.indexOf('http') > -1 ? imgConfig.host : `https://${imgConfig.host}`;
179
      return Vue.axios({
180
        timeout: 0,
181
        headers: {
182
          'Content-Type': 'multipart/form-data;'
183
        },
184
        onUploadProgress: progressEvent => {
185
          const complete = (progressEvent.loaded / progressEvent.total * 100 | 0);
186
          fileObj.onProgress({ percent: complete });
187
        }
188
      })
189
        .post(hostAddress, formData)
190
        .then(() => {
191
          let url = '/' + imgConfig.bucket + '/' + form.keyPrefix + '/' + form.key;
192
          return this.getImgUrl(url).then(result => {
193
            return {
194
              uid: form.file.uid,
195
              name: form.name,
196
              size: form.file.size,
197
              url: result.urls[0] || ''
198
            };
199
          });
200
        }).catch(err => {
201
          this.$handleError(err, '上传文件失败');
202
          this.loading = false;
203
        });
204
    },
205
    getImgUrl(url) { // * 获取文件金山云路径
206
      return Vue.http
207
        .post('url', {
208
          keys: [url]
209
        })
210
        .then(resp => Vue.checkResp(resp))
211
        .catch(err => {
212
          this.$handleError(err, '上传文件失败');
213
          this.loading = false;
214
        });
215
    },
216
    handleBeforeUpload(file) { // 上传之前校验
217
      let imgConfig = this.imgConfig;
218
      let lastIdx = file.name.lastIndexOf('.');
219
      let keyName = '';
220
      if (lastIdx > 0) {
221
        let fileSuffix = file.name.substring(lastIdx);
222
        let reg = /[\u4e00-\u9fa5]/g;
223
        if (!reg.test(fileSuffix)) {
224
          keyName = fileSuffix;
225
        }
226
      }
227
      this.form = {
228
        name: file.name,
229
        key: feConfig.IMG_SERVICE + UUID.v4() + keyName,
230
        KSSAccessKeyId: imgConfig.ak,
231
        policy: imgConfig.policy,
232
        signature: imgConfig.signature,
233
        keyPrefix: imgConfig.keyPrefix,
234
        file
235
      };
236
      if (!this.noLimitSize) {
237
        this.$message.warning('上传文件大小不能超过 ' + this.fileSize[0] + this.fileSize[1]);
238
        return false;
239
      }
240
      let splitName = file.name.split('.');
241
      let nameLength = splitName.length;
242
      if (this.fileType.indexOf(splitName[nameLength - 1]) < 0) {
243
        this.$message.error('上传文件格式错误!');
244
        return false;
245
      }
246
    },
247
    removeFile(file) { // 处理移出文件
248
      this.fileLists.splice(this.fileLists.findIndex(i => i.uid === file.uid), 1);
249
      this.fileNames.splice(this.fileNames.findIndex(i => i === file.name), 1);
250
      this.$emit('removeFileName', file);
251
    },
252

253
    handleExceed(files, fileList) { // 判断文件上传数量
254
      this.$message.warning(
255
        `当前限制最多上传 ${this.limit} 个文件，
256
        本次选择了 ${files.length} 个文件，
257
        共选择了 ${files.length + fileList.length} 个文件`
258
      );
259
    },
260
    handleSuccess(response, file, fileList) { // 上传文件成功之后的回调
261
      this.fileNames = [];
262
      this.$nextTick(() => {
263
        fileList.forEach(i => this.fileNames.push(i.name));
264
      });
265
      clearInterval(this.interval);
266
      this.fileLists = fileList;
267
      this.$emit('uploadSuccess', response, file, fileList);
268
      this.loading = false;
269
      this.uploadPercent = file.percentage;
270
      const timeOut = setTimeout(() => {
271
        this.flag = false;
272
        this.uploadPercent = 0;
273
        clearTimeout(timeOut);
274
      }, 1000);
275
    },
276
    handleError() { // 处理上传失败的回调
277
      this.loading = false;
278
      this.flag = false;
279
      this.uploadPercent = 0;
280
      this.$message.error('文件' + this.form.name + '上传失败');
281
    },
282
    handleUploadProgress(event, file, fileList) { // 上传进度
283
    }
284
  }
285
};
286
</script>

1
<style scoped>
2
.uploadFile {
3
  position: relative;
4
}
5

6
/* vue深度选择器 <<< 等同于 /deep/ */
7
.hide_box >>> .el-upload--picture-card {
8
  display: none;
9
}
10

11
.fileName {
12
  position: absolute;
13
  top: 150px;
14
  left: 0;
15
  width: 150px;
16
  overflow: hidden;
17
  color: #12a1b7;
18
  text-align: center;
19
  text-overflow: ellipsis;
20
  white-space: nowrap;
21
}
22
</style>

1
// 根据自己的实际开发情况添加参数；
2
<fileUpload
3
          :is-preview="isPreview"
4
          :file-list-data="item.contract||[]"
5
          :is-disabled-del="false"
6
          :list-type="listType"
7
          :loading-text="loadingText"
8
          :no-limit-size="true"
9
          @removeFileName="removeFileName"
10
          @uploadSuccess="uploadSuccess"
11
        />