基于 vue+element ui 文件上传

首先，由于毕设中需要上传pdf和图片文件，所以做完了，来给大家分享一下，

本项目是基于Vue + Element UI 完成的文件上传

PDF文件上传和图片文件

<el-form-item label="上传书籍文件" prop="fileName" required>
  <el-input v-model="ruleForm.fileName" placeholder="请上传文件" style="width: 150px" :disabled="true"> </el-input>
  <el-upload style="width: 200px; display: inline; margin-left: 25px" name="bookFile" class="upload-demo" ref="upload" action="/api/bsBook/upload" :show-file-list="true" :before-upload="beforeUploadPDF">
    <el-button class="selectfile" slot="trigger" type="danger" icon="el-icon-upload2">选取文件</el-button>
    <el-button type="danger" @click="viewFile" icon="el-icon-view">预览</el-button>
  </el-upload>
</el-form-item>
<el-form-item label="选择书籍封面" prop="coverUrl" required>
  <el-upload class="switch-block" name="coverFile" action="/api/bsBook/upload" list-type="picture-card" accept="image/png, image/gif, image/jpg, image/jpeg" :limit="1" :auto-upload="false" :file-list="coverFileList" :on-change="uploadCoverChange" :on-preview="handlePicture" :on-remove="handleRemove" :on-exceed="overFile">
    <el-button slot="trigger" size="mini" type="danger">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">
      只能上传jpg/png文件，且不超过10MB
    </div>
  </el-upload>
</el-form-item>

效果图：

js部分：

data(){
　　return {
      ruleForm: {
        name: \'\', // 书籍名称
        author: \'\', // 作者
        bookCategoryId: \'\', // 书籍分类 字段
        publicationDate: \'\', // 出版日期
        coverUrl: \'\', // 书籍封面图
        copyrightUrl: \'\', // 版权图片
        // pdf 文件上传
        file: null, //
        fileName: \'\', // 书籍文件名称
        lookImageUrl: \'\' // 查看大图片路径
      },
	  fileData: null, // 书籍文件预览
      bookFileData: null, // 书籍上传文件
      bsFileCover: {}, // 书籍封面文件
      bsFileCopy: {}, // 书籍版权文件
　　}
}
// PDF 上传之前钩子调用
beforeUploadPDF(file) {
  const extension = file.name.split(\'.\').slice(-1) == \'pdf\';
  if (!extension) {
    this.$message.warning(\'上传模板只能是pdf格式!\');
    return;
  }
  let reader = new FileReader();
  reader.readAsDataURL(file);
  let that = this;
  reader.onload = function() {
    that.fileData = reader.result;
  };

  this.ruleForm.file = file;
  this.ruleForm.fileName = file.name;
  this.bookFileData = file;
  return false; // 返回false不会自动上传
},
//预览 PDF 文件，这里用的是打开新窗口用浏览器查看 PDF
viewFile() {
  if (this.fileData == null) {
    this.$message.warning(\'请先上传PDF文件\');
    return false;
  }
  var win = window.open();
  win.document.write(\'<body style="margin:0px;"><object data="\' + this.fileData + \'" type="application/pdf" width="100%" height="100%"><iframe src="\' + this.fileData + \'" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>\');
},
/**
 * 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
 * 获取书籍封面图片文件
 * @file
 * @fileList
 */
uploadCoverChange(file, fileList) {
  console.log(file, \'====\', fileList);
  const isIMAGE = file.raw.type === \'image/jpeg\' || file.raw.type === \'image/png\' || file.raw.type === \'image/jpg\' || file.raw.type === \'image/gif\';
  const isLt5M = file.size / 1024 / 1024 < 10;
  if (!isIMAGE) {
    this.$message.error(\'上传文件只能是图片格式!\');
    return false;
  }
  if (!isLt5M) {
    this.$message.error(\'上传图片大小不能超过 10MB!\');
    return false;
  }
  this.ruleForm.coverUrl = file.url;
  this.bsFileCover[\'coverFile\'] = fileList;
},
// 表单提交
submitForm(formName) {
  let submitFormData = new FormData();
  submitFormData.append(\'bookFile\', this.bookFileData); // 书籍文件
  let tempBookBaseInfo = {
    content: \'书籍内容\'
  };
  // 书籍封面文件
  Object.entries(this.bsFileCover).forEach((file) => {
    console.log(file, \'123\');
    file[1].forEach((item) => {
      // 下面的 "coverFile"，对应后端需要接收的name，这样对图片和文件做一个区分，name为images为图片
      submitFormData.append(\'coverFile\', item.raw);
    });
  });
  // 版权文件
  Object.entries(this.bsFileCopy).forEach((file) => { 
    file[1].forEach((item) => {
      submitFormData.append(\'copyrightFile\', item.raw);
    });
  });
  submitFormData.append(\'name\', this.ruleForm.name); // 书籍名称
  submitFormData.append(\'author\', this.ruleForm.author); // 书籍作者
  submitFormData.append(\'content\', tempBookBaseInfo.content);
  submitFormData.append(\'bookCategoryId\', this.ruleForm.bookCategoryId); // 书籍分类Id
  submitFormData.append(\'publicationDate\', this.getYMD(this.ruleForm.publicationDate)); // 出版日期
  submitFormData.forEach((element) => {
    console.log(element, \'上传参数\');
  });
  // 下一步提交数据，上传书籍
  this.$refs[formName].validate((valid) => {
    if (valid) {
      // 书籍基础信息
      uploadBookBaseInfo(submitFormData).then((res) => {
        console.log(res, \'提交返回结果\');
        if (res.data.code === 0) {
          this.$message({
            showClose: true,
            message: \'上传成功！请等待管理员审核！\',
            type: \'success\',
            duration: 4000
          });
        } else {
          this.$message({
            showClose: true,
            message: \'上传失败，请联系管理员！\',
            type: \'error\',
            duration: 4000
          });
        }
      });
    } else {
      this.$message({
        showClose: true,
        message: \'请重新检查数据填写是否有遗漏！\',
        type: \'error\',
        duration: 4000
      });
      return false;
    }
  });
}

现在就来测试一下，发现可以上传成功：

希望可帮助到你！文章写的比较粗略，后期有时间会完善完善！