zoukankan      html  css  js  c++  java
  • Vue使用element上传

          <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);
        },
    

      

  • 相关阅读:
    jdk7_ConcurrentHashMap 图示
    Teradata 日期函数
    Teradata正则表达式
    Teradata sql去除字段中的字母/数字
    sql查询连续3天有交易记录的客户
    批量生成sql查询语句
    sql查询字段中是否含有字母/数字/符号
    sql查询每个人最新的2个电话号码
    python连接Teradata数据库
    dos命令获取文件行数
  • 原文地址:https://www.cnblogs.com/js-liqian/p/11806818.html
Copyright © 2011-2022 走看看