Vue Element-ui el-upload

<el-form-item prop="" label="幻灯图">
          <el-upload
            :name="'attachment'"
            :action="uploaderRequestUrl"
            list-type="picture-card"
            :on-preview="handlePreview"
            :before-remove="beforeHandleRemove"
            :on-remove="handleRemove"
            :headers="uploadHeader"
            :on-success="handleSuccess"
            :on-error="handleError"
            :auto-upload="true"
            :before-upload="beforeUpload"
            :limit="slideLimit"
            :file-list="slideFileList"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

beforeHandleRemove(file, fileList) {
      return true;
    },
    handleRemove(file, fileList) {
      if (file && file.status === "success") {
        this.slideFileList = fileList;
        this.form.cover.slide = [];
        if (this.slideFileList.length > 0) {
          for (let i = 0; i < this.slideFileList.length; i++) {
            this.form.cover.slide[i] = this.slideFileList[i].url;
          }
        }
      }
    },

beforeUpload(file) {
      let limit = 5;
      const isLtxM = file.size / 1024 / 1024 < limit;
      if (!isLtxM) {
        this.$message.error("上传文件大小不能超过" + limit + "MB!");
        return false;
      }
      return true;
    },
    handleSuccess(res) {
      if (res.error !== 0) {
        console.log("err");
        this.uploadErrorTip(res.message);
      } else {
        console.log("succ");
        this.uploadSuccessTip();
        // console.log(res);
        let filePath = res.data.file_path;
        this.form.cover.slide.push(filePath);
        // console.log(this.form.cover.slide);
        this.slideFileList = this.form.cover.slide.map(item => {
          return {
            name: item,
            url: item
          };
        });
        // console.log(this.slideFileList);
      }
      this.listLoading = false;
      this.isUploading = false;
    },
    handleError(res) {
      this.uploadErrorTip("上传失败");
      this.listLoading = false;
      this.isUploading = false;
    },

uploadErrorTip(msg) {
      this.$message.error(msg);
    },
    uploadSuccessTip() {
      this.$message({
        message: "上传成功",
        type: "success"
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多可以 ${this.slideLimit} 个文件`);
    }
computed: {
    uploaderRequestUrl() {
      return `${process.env.VUE_APP_BASE_API}remote-upload`;
    }
  },

阿斯达按时打算打算打算大所多按时

原文地址:https://www.cnblogs.com/arvin-an/p/14267371.html