upload上传及回显

最新推荐文章于 2025-08-11 19:52:03 发布

原创最新推荐文章于 2025-08-11 19:52:03 发布 · 853 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

文章展示了如何在Vue.js应用中使用el-upload组件进行文件上传，包括设置上传地址、文件类型限制、上传前的规则验证、上传成功与失败的回调处理、文件列表的回显以及预览功能。同时，代码示例中提到了对PDF文件类型的特定支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

upload上传及回显

<el-upload ref="uploadRef" :action="uploadAction" :accept="uploadFileType.join(',')" :before-upload="handleUploadRule" :on-change="handleUploadChange" :on-success="handleUploadSuccess" :on-error="handleUploadError" :on-preview="handleUploadPreview" :file-list="fileList" :multiple="false" drag>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">只能上传pdf文件</div>
            </el-upload>

import { baseUrl } from "../../../public/ipConfig";
data(){
  return{
  uploadAction: baseUrl.base + "/preplan/info/upload",//上传地址
  uploadFileType: [".pdf"], //暂时支持pdf ['.pdf', '.doc', '.docx']//上传文件类型
  fileList: [], // 上传回显需要
}
}

    // 新建
    addList () {
      this.Sign = "add";
      this.title = "新建";
      this.disabled = false;
      this.dialogVisible = true;
      this.form = {};
      this.fileList = [];
    },
     // 编辑
    editList (row) {
      this.Sign = "edit";
      this.title = "编辑";
      this.disabled = false;
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(row));
      this.getResourceData(row.id).then(() => {
        console.log(this.topResourceData, "this.topResourceData");
        this.handleShowData(this.topResourceData);
      });
      console.log(row, "row");
      if (row.file == "" && row.fileName == "") {
        this.fileList = [];
      } else {
        this.fileList = [
          {
            name: row.fileName,
            url: row.fileUrl,
          },
        ];
      }
    },

handleUploadRule (file) {
      // 上传前校验
      let type = file.name.match(/.[^.]+$/)[0].toLowerCase();
      if (!this.uploadFileType.includes(type)) {
        this.$message.error(
          "格式错误，仅支持 " + this.uploadFileType.join(" | ") + " ！"
        );
        return false;
      }
      return true;
    },
    // 上传接口成功
    handleUploadSuccess (res) {
      if (res.code == 200) {
        this.file = res.data.relativePath;
        this.fileName = res.data.fileName;
        console.log(this.file, "this.file");
        // 文件上传成功
        this.$message.success("文件上传成功！");
      } else {
        this.handleUploadError();
      }
    },
    // 文件上传失败
    handleUploadError () {
      this.$message.error("文件上传失败！");
    },
    //上传文件发生变化
    handleUploadChange (file, fileList) {
      // console.log(file, fileList, '===handleUploadChange===');
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      this.fileList = fileList;
    },
    // 上传列表预览
    handleUploadPreview (file) {
      console.log(file, '===上传列表预览===');
      let url = '';
      if (file.url) {
        url = file.url
      } else if (file.response && file.response.data) {
        url = file.response.data.relativePath
      }
      this.previewFile = url;
      this.previewVisible = true;
    },