el-upload单图上传,包含预览、删除、默认显示。

不管现实多么惨不忍睹,都要持之以恒地相信,这只是黎明前短暂的黑暗而已。不要惶恐眼前的难关迈不过去,不要担心此刻的付出没有回报,别再花时间等待天降好运。真诚做人,努力做事!你想要的,岁月都会给你。el-upload单图上传,包含预览、删除、默认显示。,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

在这里插入图片描述
在这里插入图片描述

	<el-form-item label="一号位图:" prop="pgUrl1">
			 <el-upload
                action=""<!--指定上传地址,我要自己上传,这样可以防止服务器上产生垃圾数据-->
                :http-request="gprequestUpload1"<!--覆盖后的上传方法-->
                list-type="picture-card"<!--设置上传框的模式多图形式,文本形式-->
                :show-file-list="true"<!--是否显示已上传文件列表-->
                :on-remove="handleRemove""<!--文件列表移除文件时的钩子-->
                :file-list="gpfileList1"<!--文件列表,用来做默认显示。-->
                :on-preview="handlePictureCardPreview"<!--预览的方法-->
                :class="{hide: uploadHide}"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog
                :visible.sync="dialogVisible"
                title="预览"
                width="800"
                append-to-body
              >
                <img
                  :src="dialogImageUrl"
                  style="display: block; max-width: 100%; margin: 0 auto"
                />
              </el-dialog>
    </el-form-item>
    <div slot="footer" class="text-center">
        <el-button type="primary" @click="gpsubmitForm">确 定</el-button>
        <el-button @click="gpcancel">取 消</el-button>
      </div>
 data() {
      return {
    	gpfileList1: [],
        uploadHide:false,
        dialogImageUrl: "",
        dialogVisible: false,  
      }
	}
 methods: {
 	handleGoodsPic(row) {
        this.reset()
        const gid = row.gId
        this.form.gId = gid
        this.gpopen = true
        this.gploading = false
        this.gptitle = '详情图'
        this.gpfileList1.push({
          name: "1",
          url: "http://smart.senseeiot.com/prod-api/profile/upload/2021/12/30/c59313a6-1989-4bd4-9b03-ebfe805acedd.jpeg"
        }, {
          name: "2",
          url: "http://smart.senseeiot.com/prod-api/profile/upload/2021/12/30/c59313a6-1989-4bd4-9b03-ebfe805acedd.jpeg"
        })
        this.uploadHide = true;
      },
 	//提交方法
	gpsubmitForm: function () {
        console.log(this.gpform.pgUrl1)
        let formData = new FormData()
        formData.append('avatarfile', this.gpform.pgUrl1)
        formData.append('gId', this.form.gId)
        imgupload(formData).then(response => {
          this.$modal.msgSuccess('操作成功')
          this.gpopen = false
        })
      },
      gpcancel() {
        this.gpopen = false
        this.reset()
      },
      //覆盖后的上传方法
      gprequestUpload1(file) {
        this.uploadHide = true;
        this.gpform.pgUrl1 = file;
      },
      //上传前的方法,用户判断尺寸、大小、类型
      gpbeforeUpload(file) {
       const isJPG =
          file.type === "image/jpg" ||
          file.type === "image/jpeg" ||
          file.type === "image/png" ||
          file.type === "image/gif";
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isJPG) {
          this.$message.error("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
        }
        if (!isLt2M) {
          this.$message.error("上传图片不能大于10M");
        }
        const isSize = new Promise(function (resolve, reject) {
          let width = 378;
          let height = 200;
          let _URL = window.URL || window.webkitURL;
          let image = new Image();
          image.onload = function () {
            let valid = image.width == width && image.height == height;
            valid ? resolve() : reject();
          };
          image.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            this.$message.error("上传头像图片尺寸不符合,只能是378*200");
            return Promise.reject();
          }
        );
        return isJPG && isLt2M && isSize;
      },
      //删除方法获取到的file是被删除的file
      handleRemove(file) {
        this.gpfileList1 = [];
        this.uploadHide = false;
      },
      // 预览
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      reset() {
          this.gpfileList1 = [],
      },
	}
<style>
 .hide .el-upload--picture-card {
    display: none;
  }
  //去除动画
  .el-list-enter-active,
  .el-list-leave-active {
    transition: all 0s;
  }
</style>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/188077.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!