element-ui 之upload 檔案上傳

多個檔案上傳

使用: :file-list="imgUrl" 和 :http-request="uploadPicture"

<template>
    <div class="fei-upload">
        <el-upload
                class="picture-uploader"
                :class="{hideUpload:imgUrl.length>fileLimit}"
                :limit=fileLimit+1
                
 
action=""
                ref="uploader"
                :file-list="imgUrl"
                :http-request="uploadPicture"
                :before-upload="beforeUpload"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
 
>
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt=".">
        </el-dialog>
    </div>
</template>
<script>
  /* 這是ElementUI */
  import Vue from 
 
'vue'
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  Vue.use(ElementUI);
  /* 這是ElementUI */

  export default {
    components:{},
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        imgUrl: [], // 上傳所有檔案列表
      }
    },
    props: {
      typeString: { // 上傳圖片型別
        type: String,
        default: "fei_type"
      },
      fileLimit: { // 上傳圖片張數
        type: Number,
        default: 1,
      },

    },
    methods: {
      handleRemove(delFile, newFileList) {
        this.imgUrl = [...newFileList];
        this.updateParentImg();
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      uploadPicture(req) {
        const reader = new FileReader();
        reader.readAsDataURL(req.file);
        reader.onload = () => {
          let _index = req.file.name.lastIndexOf(".");
          let suffix = req.file.name.substr(_index);

          // 上傳圖片
          const params = {
            suffix: suffix,
            type: this.typeString,
            base64: reader.result.split(',')[1]
          }
          api.$post(params).then(res => {
            if (res.data.code=== 200) {
              let _url = res.data.data.url
              this.imgUrl.push({id: res.data.data.fileId, name: req.file.name, url: _url});
              this.updateParentImg();
            } else {
              this.$message.error('上傳失敗')
            }
          }).finally(() => {
            this.loading = false
          })
        }
      },
      updateParentImg() {
        this.$emit('parentImgList', this.imgUrl);
      },
      beforeUpload(file) {
        console.log(file);
      },
    },
  };
</script>
<style lang="sass" scoped>
.fei-upload {
    .hideUpload::v-deep {
        .el-upload--picture-card {
            visibility: hidden;
        }
    }
}
</style>