vue element 文件上传（单文件、多文件手动上传） 、 文件下载

一、文件上传

记一次文件上传和文件下载，写的比较仓促，就记录了代码过程，其他没有详细解释，只为记录自己知识积累的过程。

1、单文件上传

HTML部分：

 <el-row v-for="(item,index) in DebugfileList">
        <el-col :span="10"><span>{
   {
   item.name}}</span></el-col>
        <el-col :span="14">
          <el-upload 
            class="upload-demo"
            action="#" 
            :data="{name:item.businessType}" 
            :on-remove="handleRemove"
            :before-remove="beforeRemove" 
            :limit="1" 
            :on-exceed="handleExceed" 
            :file-list="item.fileList"
            :http-request="handelUploadDebugfile" 
            style="display:flex;flex-direction:row;">
            <el-button size="small" type="primary" icon="el-icon-document-add">选取文件</el-button>
          </el-upload>
        </el-col>
        </el-upload>
      </el-row>

JS部分：

 // 单文件调试附件上传
      handelUploadDebugfile(e) {
   
        let file = e.file;
        let form = new FormData()
        let maxType = '1';
        let businessType = e.data.name;
        form.append('files', e.file);
        uploadfile(form, this.orderId, maxType, businessType).then(data => {
   
          this.getDeFilesTableData()
        })
      },//这里传了四个参数，files，orderId,maxType,businessType

2、多文件上传

HTML部分：

 <el-dialog title="上传文件" :visible.sync="dialogFile" width="50%">
      <div class="item list">
        <div>
          <el-row>
            <el-col :span="3"><span> 文件类型选择:</span>
            </el-col>
            <el-col :span="5">
              <el-select v-model="fileTypevalue" placeholder="请选择文件类型">
                <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="8" />
            <el-col :span="8" />
          </el-row>
          <el-row>
            <el-col :span="3"><span> 上传文件:</span></el-col>
            <el-col :span="5">
              <el-upload 
                action="#" 
                ref="upload"  
                :before-upload="beforeupload" 
                :on-preview="handlePreview" 
                :on-remove="handleRemove" 
                multiple
                :file-list="mutiFileList" 
                :auto-upload="false" 
                :http-request="mutiFilesUpload">
                <el-button slot="trigger" size="small" type="primary" icon="el-icon-folder-add">上传附件</el-button>
              </el-upload>
            </el-col>
            <el-col :span="8" />
            <el-col :span="8" />
          </el-row>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFile = false">取 消</el-button>
        <el-button type="primary" icon="el-icon-upload" @click="submitFiles">上传到服务器</el-button>
      </span>
    </el-dialog>

JS部分：

      // 多文件附件上传到服务器
      mutiFilesUpload(e) {
   
        this.Filesform.append('files', e.file)
      },
      // 多文件附件上传到服务器
      submitFiles() {
   
          this.Filesform = new FormData()
          this.$refs.upload.submit()
          let maxType = '2';
          let businessType = this.fileTypevalue;
          let form = this.Filesform
        if (this.fileTypevalue != '' && this.flag) {
   
          uploadfile(form, this.orderId, maxType, businessType).then(data => {
   
            this.dialogFile = false
            this.fileTypevalue = ''
            this.$refs.upload.clearFiles()
            this.flag=false
            this.getFilesTableData()
          })
        } else {
   
          this.$notify({
   
            title: '警告',
            message: '请选择文件类型或文件',
            type: 'warning'
          });
        }
      },

一、文件下载

HTML部分：

 <el-button size="mini" type="warning" icon="el-icon-download" @click="download(row)">下载</el-button>

JS部分：

 download(row) {
   
        let id = row.id
        var elemIF = document.createElement('iframe');
        elemIF.src = '/api/produce/workFileInfo/downloadFile?id=' + id;
        elemIF.style.display = 'none';
        document.body.appendChild(elemIF);
      },

附：整个页面代码

<template>
    <div class="main">
    <!-- 单文件调试附件 -->
    <div class