zoukankan      html  css  js  c++  java
  • 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`;
        }
      },

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

  • 相关阅读:
    浅释一下,为什么要使用接口?
    枚举的简单使用
    最富有的人
    拜读websharp时,发现的几处问题(二)
    如何规划职业发展道路如何规划职业发展道路(ZT)
    在.NET环境中使用单元测试工具NUnit(ZT)
    [转贴]不得不知的几个可怕信息!
    ASP.NET中数据导入至Excel
    拜读websharp时,发现的几处问题(一)
    合并DataGrid相同单元格
  • 原文地址:https://www.cnblogs.com/arvin-an/p/14267371.html
Copyright © 2011-2022 走看看