当前位置:首页 > elementui > 正文内容

上传组件 el-upload

自由小鸟2年前 (2022-08-15)elementui737
 <el-upload
                      :on-success="uploadSuccess"
                      :on-error="handleErr"
                      :on-remove="handleRemove"
                      :action="uploadAction"
                      :data="fileData"
                      :on-preview="handlePreview"
                      style="margin: 0 10px"
                      @mouseover.native="addTitle"
                      :file-list="fileList"
                    >
                      <el-button
                        size="small"
                        icon="el-icon-upload"
                        type="primary"
                        >上传回执单</el-button
                      >
                    </el-upload>

                     // 上传成功
    uploadSuccess(res, fileList) {
      let attachments = [];
      attachments = deepClone(this.ruleForm.attachments);

      attachments.push({
        id: res.id,
        url: res.path,
        name: res.name,
      });
      this.ruleForm.attachments = attachments;
      // this.ruleForm.localPath = attachments;
    },
    // 删除文件
    fileRemove(file) {
      // console.log("这里是附件删除的内容===", file);
      if (
        this.formDate &&
        !(JSON.stringify(this.formDate) === "{}") &&
        file.tipsInfo == this.sucessText
      ) {
        this.deleteAttachments.push(file);
      }
      this.ruleForm.attachments = this.ruleForm.attachments.filter(
        (item) => item.id !== file.id
      );
      // this.ruleForm.localPath = "";
      // this.ruleForm.downloadPath = "";
    },

    //根据uuid获取附近
    fetchByType(item) {
      fetchByType({ value: item, type: "uuid" }).then((res) => {
        if (res.message == "Success") {
          if (typeof res.result != "undefined" && res.result.length > 0) {
            console.log("upload", res);
            this.fileList = [];
            res.result.forEach((element) => {
              var file_data = {
                name: element.fileName,
                url: element.filePath,
                id: element.id,
                uuid: element.fileGroupUuid,
              };
              this.fileList.push(file_data);
            });
            if (this.fileList.length == res.result.length) {
              this.upload_count = this.fileList.length;
              this.loading = false;
            }
          } else {
            // this.loading = false;
          }
        } else {
          // this.loading = false;
        }
      });
    },



    upload组件代码
     <template>
  <div>
    <el-upload
      v-if="!loading"
      class="upload-demo"
      :disabled="disabled"
      :action="url"
      :limit="limit"
      :on-success="handelSuccess"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-preview="handlePreview"
      :on-exceed="handleExceed"
      :before-upload="beforeUpload"
      multiple
      :headers="headers"
      :file-list="fileList"
      :data="fileData"
      :accept="file_type"
    >
      <el-button
        v-if="!disabled ? upload_count < limit : false"
        :icon="icon"
        size="small"
        type="primary"
      >
        <span v-if="!icon">点击上传</span>
      </el-button>
      <div slot="tip" v-if='showTip' class="el-upload__tip">
        {{ tip }}
      </div>

    </el-upload>
  </div>
</template>



<script>
import { getToken } from "@/utils/auth";
import { fetchByType, getUrlByPath, remove } from "@/api/storage";
export default {
  data () {
    return {
      cityOptions:this.fileList,
      cities: this.fileList,
      fileList: [],
      url: process.env.MANAGEER_API + "/storage",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      upload_count: 0,
      loading: true,
    };
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    showTip:{
      type: Boolean,
      default: false,
    },
    fileName: {
      type: String,
      default: null,
    },
    savePath: {
      type: String,
      default: null,
    },
    file_size: {
      type: Number,
      default: 50,
    },
    file_type: {
      type: String,
      default: "*",
    },
    uuid: {
      type: String,
      default: null,
    },
    limit: {
      type: Number,
      default: 1,
    },
    type: {
      type: String,
      default: "uuid",
    },
    value: {
      type: String,
      default: null,
    },
    tip: {
      type: String,
      default: "只能上传jpg/png文件,且不超过500kb",
    },
    guarded: {
      type: String,
      default: "white",
    },
    icon: {
      type: String,
      default: "",
    },
    status: {
      type: Number,
      default: 0,
    },
    isCallDelFileInterface: {
      type: Boolean,
      default: true,
    },
    paramFileList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    value (newData, oldData) {
      if (newData && oldData == null) {
        this.filesByType()
      }
    },
    paramFileList (newData, oldData){
      console.log('upload==',newData)
      this.fileList = newData || []
    }
  },
  created () {
    if (this.value) {
      this.filesByType();
    }
    this.fileList = this.paramFileList || []
    this.loading = false
      console.log('upload==',this.paramFileList)

  },
  computed: {
    fileData () {
      var data = {};
      if (this.fileName) {
        data.name = this.fileName;
      }
      if (this.savePath) {
        data.path = this.savePath;
      }

      if (this.uuid) {
        data.uuid = this.uuid;
      }
      if (this.status === 1) {
        data.status = this.status;
      }
      return data;
    },
  },
  methods: {
    filesByType () {
      this.loading = true;
      fetchByType({ value: this.value, type: this.type }).then((res) => {
        if (res.message == "Success") {
          if (typeof res.result != "undefined" && res.result.length > 0) {
            res.result.forEach((element) => {
              var file_data = {
                name: element.fileName,
                url: element.filePath,
                id: element.id,
                uuid: element.fileGroupUuid,
              };
              this.fileList.push(file_data);
            });
            if (this.fileList.length == res.result.length) {
              this.upload_count = this.fileList.length;
              this.loading = false;
            }
          } else {
            this.loading = false;
          }
        }
      });
    },
    handleRemove (file, fileList) {
      if (file.status == "success") {
        if (this.isCallDelFileInterface) {
          if (typeof file.response != "undefined") {
            file.id = file.response.result.id;
          }
          remove(file.id).then((res) => {
            if (res.message == "Success") {
              this.upload_count--;
              this.$emit("fileRemove", file);
              this.$message({
                type: "success",
                message: "文件移除成功!",
              });
            }
          });
        } else {
          this.upload_count--;
          this.$emit("fileRemove", file);
        }
      } else {
        this.upload_count--;
      }
    },
    handlePreview (file) {
          console.log('aaa==',file)

      if (typeof file.response != "undefined") {
        file.url = file.response.result.path;
      }
      this.$confirm("是否需要下载文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        getUrlByPath({ path: file.url }).then((res) => {
          console.log('aaa')
          console.log('res==',res)
          if (res.message == "Success") {
            window.open(res.result, "_blank");
            this.$message({
              type: "success",
              message: "文件下载成功!",
            });
          } else {
            this.$message({
              type: "error",
              message: "文件下载失败,文件没有找到!",
            });
          }
        });
      });
    },
    beforeUpload (file) {
      if (this.limit == this.upload_count) {
        return false;
      }
      var file_ext = file.name.substring(file.name.lastIndexOf("."));
      var ext_valid = true;
      var file_size_valid = file.size / 1024 / 1024 < parseInt(this.file_size);
      if (this.file_type != "*") {
        var file_type_arr = this.file_type.split(",");
        if (file_type_arr.length > 0) {
          if (this.guarded == "white") {
            if (!this.in_array(file_ext, file_type_arr)) {
              this.$message({
                message: "上传文件仅支持 " + file_type_arr.join("、") + "格式!",
                type: "warning",
              });
              ext_valid = false;
            }
          } else {
            if (this.in_array(file_ext, file_type_arr)) {
              this.$message({
                message: "上传文件不支持 " + file_type_arr.join("、") + "格式!",
                type: "warning",
              });
              ext_valid = false;
            }
          }
        }
      }
      if (!file_size_valid) {
        this.$message({
          message: "上传文件最大支持 " + this.file_size + "M!",
          type: "warning",
        });
      }

      return file_size_valid && ext_valid;
    },
    in_array (search, array) {
      for (var i in array) {
        if (array[i] == search) {
          return true;
        }
      }
      return false;
    },

    handleExceed (files, fileList) {
      if (files.length > this.limit) {
        this.$message.warning(
          `当前限制选择 ${this.limit} 个文件,本次选择了 ${files.length
          } 个文件,共选择了 ${files.length + fileList.length} 个文件`
        );
      } else {
        this.$message.warning(
          `当前限制选择 ${this.limit} 个文件,请先移除文件后,重新上传`
        );
      }
    },
    beforeRemove (file, fileList) {
      if (file.status == "success") {
        return this.$confirm(`确定移除 ${file.name}?`);
      }
    },
    handelSuccess (response, file, fileList) {
      if (response.message == "Success") {
        this.upload_count++;
        this.$emit("uploadSuccess", response.result,fileList);
      } else {
        this.$message.error("文件上传失败");
      }
    },
  },
};
</script>

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=146

“上传组件 el-upload” 的相关文章

elementui -动态循环验证

<el-col :span="9"> <el-form-item label="消费总人数" :rules="[{required: true,pattern: /^(\d+)(.\d{0...

elementui 整个form禁止,但是除一些不禁止

在除外的外层添加一个el-form <el-form label-width="100px" :model="form" :disabled="true"> <el-form-item label="...

elmentui rules验证

totalAmount12: [ { required: true, message: "请输入借款金额", trigger: "blur" }, { pattern: /^(\d+)(.\d{1,50})?$/,...

el-table 里金额千分位符,保留两位小数

<el-table-column prop="amountRec" :formatter="rbstateFormat" label="金额" min-width="150" ></el-table-c...

公用方法

1,deepClone 深度拷贝方法2,deepMerge 合并对象3,oninput 金额只能是数字保留2位小数 <el-input @keyup.native=” ruleForm.totalAmount = oninput(...