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

Posted 2022-11-23 咖啡壶子

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

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

上传文件

上传文件的工具组件：

<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)
      );