大飞_dafei

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

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>
View Code
复制代码

 

简单上传一个文件,

复制代码
<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>
View Code
复制代码

 

 

posted on   大飞_dafei  阅读(233)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
历史上的今天:
2020-05-25 Preserve log 保留跳转前网络请求
2020-05-25 merge into current 合并到当前分支
2020-05-25 Git 设置提交用户名字和邮箱
2020-05-25 WebStorm 格式化文件后,原来的空格丢失
点击右上角即可分享
微信分享提示