• 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`;
        }
      },

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

  • 相关阅读:
    文件上传中的错误文件上传及其命名
    播放音乐
    文件的读取与写入ASP.NET中常用代码之四(转载)
    Spring中文在线文档
    Css 图形
    离职进行时
    又面试了
    在Spring应用中创建全局获取ApplicationContext对象
    开始研究WEKA,一个开源java的数据挖掘工具
    收到SZ科技的录取通知,纠结是不是要去
  • 原文地址:https://www.cnblogs.com/arvin-an/p/14267371.html
Copyright © 2020-2023  润新知