el-upload 在弹框中上传组件再次打开会闪现之前的文件

44 篇文章 0 订阅
.diaForm{
  .el-form-item {
    &.limit {
      .el-upload--picture-card {
        display: none;
      }
    }
    &.avatar {
      .el-upload--picture-card {
        width: 140px;
        height: 140px;
        line-height: 140px;
      }
      .el-upload-list__item {
        width: 140px;
        height: 140px;
      }
    }
    .el-upload-list__item {
      transition: none !important;
    }
    ::v-deep .el-upload-list__item { transition: none !important;}
    .el-upload-list__item.is-ready {
      display: none;
    }
  }
}
<el-form-item
  prop="avatar"
  label="头像:"
  class="avatar"
  :class="{limit: hideUploadIcon}">
  <el-upload
    list-type="picture-card"
    :limit="1"
    :action="imageUrl"
    :file-list="avatarList"
    :before-upload="beforeImageUpload"
    :on-success="uploadAvatarSuccess"
    :on-change="handleAvatarChange"
    :on-remove="handleAvatarRemove">
    <i class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</el-form-item>

 hideUploadIcon: false,
 avatarList: [],
 imageUrl: process.env.VUE_APP_BASE_API + 'api/Oss/UploadFile',

// 详情方法
this.avatarList = res.response.avatar ? [{url: res.response.avatar}] : []
this.hideUploadIcon = this.avatarList.length > 0

beforeImageUpload(file) {
  const isImage = file.type.includes('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    this.$message.error('只能上传图片文件!');
  }
  // if (!isLt2M) {
  //   this.$message.error('上传头像图片大小不能超过 2MB!');
  // }
  return isImage
},

// 上传图
uploadAvatarSuccess(res) {
  this.$set(this.formData, 'avatar', res.response)
},
// 删除图
handleAvatarRemove(file, fileList) {
  this.hideUploadIcon = fileList.length >= 1
  this.$set(this.formData, 'avatar', '')
},
// 监听图的上传事件
handleAvatarChange(file, fileList) {
  this.hideUploadIcon = fileList.length >= 1
},

 

 

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在 Vue 使用 `el-upload` 组件实现文件上传非常简单,可以通过以下步骤实现: 1. 安装 `element-ui` 组件库,可以通过 npm 或 yarn 安装: ``` npm install element-ui --save ``` 或 ``` yarn add element-ui ``` 2. 在需要使用 `el-upload` 的组件引入组件: ```javascript import { Upload } from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; export default { components: { Upload } } ``` 3. 在模板使用 `el-upload` 组件,设置 `action` 属性为上传文件的后台接口地址,设置 `on-success` 属性为上传成功后的回调函数,将上传成功后的数据保存到组件的 `fileList` 属性,代码如下: ```html <template> <el-upload class="upload-demo" action="/upload" :file-list="fileList" :on-success="handleSuccess" > <el-button slot="trigger" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" type="success">开始上传</el-button> </el-upload> </template> <script> export default { data() { return { fileList: [] }; }, methods: { handleSuccess(response, file, fileList) { this.fileList = fileList; // 在这里可以根据文件类型打开文件 } } }; </script> ``` 4. 在 `handleSuccess` 回调函数,可以根据上传文件类型打开文件。例如,如果上传的是一个图片文件,可以使用以下代码打开它: ```javascript handleSuccess(response, file, fileList) { this.fileList = fileList; if (file.type.indexOf('image/') === 0) { const url = URL.createObjectURL(file.raw); window.open(url); } } ``` 如果上传的是一个文本文件,可以使用以下代码打开它: ```javascript handleSuccess(response, file, fileList) { this.fileList = fileList; if (file.type.indexOf('text/') === 0) { const reader = new FileReader(); reader.onload = function(e) { window.open(e.target.result); }; reader.readAsDataURL(file.raw); } } ``` 如果上传的是其他类型的文件,可以根据文件类型使用相应的软件或工具打开它。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值