前端如何上传文件，下载文件

前端如何上传文件，下载文件

需求描述：当点击发送时，发送需要的信息，将本地的某个文件上传，以附件的上传到数据库中。当点击页面详情时，将附件的名称显示出来，并且可以点击下载，实现下载功能

上传文件

上传文件的工具组件：

<template>
  <div>
    <input
      type="file"
      ref="file"
      multiple="multiple"
      @change="handleFileChange"
      style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"
    />
    <el-button @click="oninput" size="mini" :class="style">{{ text }}</el-button>
    <div slot="tip" class="el-upload__tip">支持上传 {{ attachmentType }}</div>
  </div>
</template>
<script>
import { strRebuild,lastSubstring } from "@/utils/strUtil";
export default {
  props: ["text"],
  data() {
    return {
      style: "",
      attachmentList: [],
      attachmentType: "",
      attachmentSize: 10,
      attachmentLimit: 3
    };
  },
  mounted() {
    if (this.text == "添加附件") {
      this.style = "tjfj";
    };
    this.attachmentType = strRebuild([
        "txt",
        "xls",
        "xlsx",
        "doc",
        "docx",
        "ppt",
        "pptx",
        "visio",
        "pdf",        
        "jpg",
        "png",
        "jpeg",
        "rar",
        "zip"
      ])
  },
  methods: {
    handleFileChange(e) {
      //验证附件类型
      if(this.attachmentType.indexOf(lastSubstring(e.target.files[0].name,'.').toLowerCase()) !== -1) {
        this.attachmentList.push(e.target.files[0]);
      } else {
        this.$message.error("不支持上传该类型的附件")
      }
      if (this.text == "选择文件" && e.target.files[0] != null) {
        this.$emit("input", e.target.files[0]);
      } else {
        this.$emit("input", this.attachmentList);
      }
    },
    oninput() {
      this.$refs["file"].click();
    }
  }
};
</script>
<style>
.tjfj {
  float: right;
}
</style>

上传文件:(发送信息的方法是写在别的组件了，所以发送附件的方法也需要连带写在一起)

上传文件template块：

<file-selector v-model="otherAttachmentList" :text="texttype2"></file-selector>

上传文件方法块：

	// 发送信息的方法
	sendMassage(){
        let mailAttachments = this.$refs.form.otherAttachmentList;
        let id = uuidv4();
      	if (mailAttachments.length > 0) {
        	mailAttachments.forEach((item,index) => {
          		this.saveAttachment(item,id);
        	})
      	}
	},
     // 在ATTACHMENT表中保存附件
    saveAttachment(attachment, mailId) {
      let params = {
        tableName: "ATTACHMENT",
        column: "FILE_CONTENT",
        data: new FormData()
      };
      params.data.append("_files", attachment);
      params.data.append("FILE_NAME", attachment.name);
      params.data.append("FILE_SIZE", attachment.size);
      params.data.append("MAIL_ID", mailId);
      uploadBlobData(params).then(res => {
        console.log(res);
      });
    },

下载文件

下载文件template块：

  <template v-if = "attachmentList.length > 0">
          <el-row  style="display: flex;align-items: center;padding: 10px 0">
            <el-col :span="18">
              <span style="font-weight: 600;font-size: 1.2em;">附件</span>
            </el-col>
            <el-col :span="6" v-if="attachmentList.length > 1">
              <el-button size="mini" plain @click="downloadAllFile(attachmentList)">全部下载</el-button>
            </el-col>
          </el-row>
          <el-row v-for="file in attachmentList" :key="file.ID" style="display: flex;align-items: center">
            <el-col :span="18">
                {{file.FILE_NAME}} 
            </el-col>
            <el-col :span="6">
                <el-button plain size="mini">打开</el-button>
                <el-button plain size="mini" @click="downloadFile(file)">下载</el-button>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </template>

下载文件方法块：

downloadFile(file) {
      let fileType = lastSubstring(file.FILE_NAME,'.')
      let blob = bs64toBlob(file.FILE_CONTENT,this.downloadBlobContentType[fileType.toLowerCase()]);
      if('download' in document.createElement('a')) {
        let elink = document.createElement('a')
        elink.download = file.FILE_NAME;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href) 
        document.body.removeChild(elink)
      } else {
        navigator.msSaveBlob(blob,file.FILE_NAME);
      }
    },
    //下载所有附件
    downloadAllFile(fileList) {
      fileList.forEach(item => {
        this.downloadFile(item)
      });
    }