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

  

猜你喜欢

转载自www.cnblogs.com/js-liqian/p/11806818.html