首页 > Web开发 > 详细

Vue使用element上传

时间:2019-11-06 18:04:40      阅读:79      评论:0      收藏:0      [点我收藏+]

 

 

 

技术分享图片

 

 

 

 

      <el-upload
              action
              v-if="IsUpload"
              style="display:inline"
              list-type="picture-card"
              :on-remove="handleRemove"
              :on-success="onSuccess"
              :on-change="on_change"
              :before-remove="before_remove"
              :limit="1"
              :before-upload="onBeforeUpload"
              accept=".jpg, .png"
              :http-request="uploadFile"
              :on-exceed="Exceed"
              :file-list="imgUrls"
            >
              <i class="el-icon-plus"></i>
              <i
                id="uploadImg"
                style="position: absolute;top: 29%;left: 50%;transform: translateX(-50%);color: #F56C6C;font-size: 12px;display:none"
              >请上传图片</i>
            </el-upload>

  

 

 

    // 上传之前的钩子
  onBeforeUpload(file) { // console.log(file) const isJPG = file.type === "image/jpeg"; const isPNG = file.type === "image/png"; if (!isJPG && !isPNG) { this.$message.error("上传图片只能是 JPG/PNG 格式!"); } return isJPG || isPNG; },

  

    // 自定义上传文件
    uploadFile(file) {
      console.log(file);
      let form = new FormData();
      // 后端接受参数 ,可以接受多个参数
      form.append("file", file.file);
      this.$post(
        "/admin/sys-file/uploadImg",
        form,
        res => {
          
        },
        err => {
          this.$message.error(err.msg);
          throw err;
        }
      );
    },

  技术分享图片

 

 

 

    // 移出之前钩子
    before_remove(a, b) {
      console.log(a, b);
      // console.log( b.findIndex(item => item.uid == a.uid))
      this.count = b.findIndex(item => item.url == a.url);
    },

  

Vue使用element上传

原文:https://www.cnblogs.com/js-liqian/p/11806818.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!