element-ui 之upload 文件上传

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>

 

简单上传一个文件,

<template>
  <div class="file-item">
    <strong> 文件上传4 </strong>
    <el-upload action :http-request="changesFile4">
      <el-button type="primary">
        element 上传文件
      </el-button>
    </el-upload>
  </div>
</template>
<script setup>
const changesFile4 = (req) => {
  let fd = new FormData()
  fd.append('file', req.file)
  fd.append('FileName', req.file.name)
  app.$post("file/upload", fd).then(res => {
    console.log("上传成功了",res);
  })
}
</script>