sysUpload.vue上傳組件 的時候 看進度的時候 不要mock 註釋掉 // if (process.env.NODE_ENV !== 'production') req...

上傳組件 的時候 看進度的時候 不要mock 註釋掉 // if (process.env.NODE_ENV !== 'production') require('@/mock')

 

<!--
* @description 上傳組件 * @fileName sysUpload.vue * @author 彭成剛 * @date 2019/04/04 11:51:13
* @version V1.0.0
!-->
<template>
  <div>
    <Upload :action="$baseUrl + 'API/file/upload'"
            ref="upload" :class="disabled ? 'uploadDisabled' : ''" :default-file-list="defaultFileList" name="file" :on-preview="handleOnPreview" :headers="headers" :on-success="handleSuccess" :on-remove="handleOnRemove" :before-upload="handleBeforeUpload">
      <Button icon="ios-cloud-upload-outline" :disabled="disabled">上傳文件</Button>
    </Upload>
    <!-- <div v-if="defaultVif">
      <Icon type="md-document" /> <a :href="this.defaultList.url">{{this.defaultList.name}}</a>
    </div> -->
    <!-- <div v-if="disabled" style="float:left;">{{defaultList.name}}</div> -->
    <!-- <div style="float:left;">
              <Alert type="success" v-if='alertVif' @on-close='alertClose' show-icon closable> {{alertText}} </Alert>
            </div> -->
  </div>
</template>

<script> import { getToken } from '@/libs/util' export default { // 多個值的初始化 仍是用init吧
 props: { headers: { type: Object, default: () => { return { token: getToken() } } }, disabled: { type: Boolean, default: false } }, data () { return { showUploadList: false, defaultVif: false, defaultList: { name: '', url: '' }, defaultFileList: [], defaultFileList2: [{ name: '' }], alertText: '' } }, components: {}, computed: {}, // mounted() {},
 methods: { handleOnPreview (file) { console.info('handleOnPreview file', file) if (file.url) { window.location.href = file.url } else { let f = file.response.data console.info('f.fileServiceUrl + f.filePath', f.fileServiceUrl + f.filePath) window.location.href = f.fileServiceUrl + f.filePath } }, handleOnProgress (event, file, fileList) { console.info('handleOnProgress (event, file, fileList) {', event, file, fileList) }, handleOnRemove (file, fileList) { console.info('handleOnRemove', file, fileList) this.$emit('emit-data', { id: '' }) }, handleSuccess (response, file, fileList) { // this.showUploadList = false
      console.info('handleSuccess', response, file, fileList) if (response.status.toString() === '20') { // 上傳成功
        this.defaultVif = true
        this.defaultList.name = response.data.origName this.defaultList.url = response.data.fileServiceUrl + response.data.filePath this.$Message.success('上傳成功！') this.$emit('emit-data', response.data) } else { // 上傳失敗
        this.$Message.warning(response.msg) } }, handleBeforeUpload (item) { this.showUploadList = true let warningStr = '' let format = ['zip'] if (this.checkFormat(item.name, format)) { warningStr += '文件格式不符，請上傳zip格式 ' } if (this.checkSize(item.size, 20)) { warningStr += '文件大小超過20M，請檢查後從新上傳！' } if (warningStr.length !== 0) { this.$Message.warning({ content: warningStr, duration: 3, closable: true }) return false } if (this.$refs.upload.fileList.length === 1) { console.info('file.length 2 come in') this.$refs.upload.fileList.splice(0, 1) } console.info('default-file-list', this.$refs.upload.fileList) console.info('file', item) }, checkSize (size, maxSize) { // size 單位是byte maxSize 單位是mb
      let maxSizeByte = maxSize * 1024 * 1024
      if (size > maxSizeByte) { return true } else { return false } }, checkFormat (fileName, format) { let index = fileName.lastIndexOf('.') let suffix = fileName.substr(index + 1) // console.info('suffix', suffix)
      let ret = true format.some((item, index, arr) => { if (item === suffix) { ret = false } }) return ret }, init (nameStr, url) { console.info('nameStr', typeof nameStr, nameStr) console.info('url', url) if (nameStr !== null && nameStr !== '') { // this.defaultVif = true
        this.defaultFileList = [] this.defaultFileList.push({ name: nameStr, url: url }) // this.$refs.upload.fileList[0].name = nameStr // this.$refs.upload.fileList[0].url = url // this.defaultList.name = nameStr // this.defaultList.url = url
 } } } } </script>
<style lang='less'> .uploadDisabled { .ivu-upload-list-remove { display: none; } } </style>