技術標籤：vuevue

1. 上傳檔案元件封裝 UploadResourcesFile.vue

<template>
    <div class="upload-file-panel" 
         v-loading="loading" 
         element-loading-text="上傳資源比較大，請耐心等待..."
  >
        <el-upload
            class="upload-demo"
            ref=
 
"upload"
            name="file"
            :action="action"
            :headers= headers
            :on-success="handleSuccess"
            :on-error="handleError"
            :on-exceed="handleExceed"
            :before-upload="beforeUpload"
 

            :auto-upload="true"
            :limit="limit"
            drag
        >

  <i class="el-icon-upload" />
     <div class="el-upload__text">將檔案拖到此處，或<em>點選上傳</em></div>
     <div slot="tip" class="el-upload__tip"
 
>
         只能上傳{{ fileTypeInfo.fileType }}檔案，且不超過{{ fileTypeInfo.maxSize }}M，最多隻     能選擇{{ fileTypeInfo.limit }}個檔案
    </div>
       </el-upload>
    </div>
</template>

<script type="text/ecmascript-6">
const { mapState } = require(`vuex`); 
    export default {
        name: `upLoad`,
        props: {
            autoUpload: {
                type: Boolean,
                default: false
            },
            limit: {
                type: Number,
                default: 1
            },
            maxSize: {
                type: Number,
                default: 1024 * 1
            },
            url: {
                type: String,
                default: ``
            },
            parameterInfo: {
                type: Object,
                default: () => {}
            }
        },
        data() {
            return {
                loading: false,
                uploadFileName : '',
                headers : {}
            };
        },
        computed: {
            ...mapState([`userInfo`]),
            action() {
                return `${this.$base.path.interfaceServiceHost}/file/upload`;
            },
        },
        mounted() {
            this.headers = {
              accessToken : this.userInfo.token.accessToken
            }
           
        },
        methods: {
            handleSuccess(res) {
                this.loading = false;
                if (res.success) {
                    this.$refs.upload.clearFiles();
                    this.$emit(`on-load-success`, Object.assign({uploadFileName : this.uploadFileName}, this.parameterInfo, {data: res.data}));
                } else {
                    this.$message({
                        showClose: true,
                        message: `檔案上傳失敗！`,
                        type: `error`
                    });
                    this.$emit(`on-load-fail`);
                }
            },
            handleError() {
                this.loading = false;
                this.$message({
                     showClose: true,
                    message: `檔案上傳失敗！`,
                    type: `error`
                });
                this.$emit(`on-load-fail`);
            },
            handleExceed(files, fileList) {
                this.$message({
                    showClose: true,
                    message: `最多隻能選擇${this.fileTypeInfo.limit}個檔案`,
                    type: `warning`
                });
                this._log(files, fileList);
            },
             beforeUpload(file) {
                this.uploadFileName = file.name;
             },
        }
    };
</script>

<style lang="scss" scoped>
    .upload-file-panel {
        margin-bottom: 2.5rem;

        .upload-btn {
            margin-top: 1rem;
        }
    }
</style>

2. 呼叫

 <UploadResourcesFile
  :max-size="curResource.maxSize"
   :file-type="curResource.fileType"
   @on-load-success="handleUploadSuccess"/>