vue2 文件下载/导入/导出 图片上传删除 一键三连

其实下载和导出一样

html
        <el-button type="primary"
                   size="mini"
                   @click="download()">下载模板</el-button>
        <el-button type="primary"
                   size="mini"
                   @click="dialogVisible4 = true">导入</el-button>


    <el-dialog :visible.sync="dialogVisible4"
               title="导入文件"
               width="400px"
               append-to-body>
      <el-form :rules="rules2"
               ref="xiazai"
               label-width="100px">
        <!-- <el-form-item label="下载模板:"
                      style="width: 100%">
          <el-button size="small"
                     type="primary"
                     plain
                     @click="download">下载模板</el-button>
        </el-form-item> -->
        <el-form-item label="请选择文件:"
                      prop="file"
                      style="width: 100%">
          <el-upload style="display: inline-block"
                     action="#"
                     :auto-upload="false"
                     :limit="1"
                     class="upload-demo"
                     :on-change="fileChange"
                     :on-success="handleAvatarSuccess"
                     :file-list="fileList"
                     ref="upload">
            <el-button slot="trigger"
                       size="small"
                       type="primary"
                       plain>选取文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="importHscExcel">确定</el-button>
      </span>
    </el-dialog>

下载
    download () {
      if (this.downLoading) {
        return
      }

      this.downLoading = true;
      this.$http
        .get(this.nozzle.wuzidownLoad, {
          responseType: "blob",
        })
        .then((res) => {
          this.downLoading = false;
          this.$download(res);
        }).catch(error => {
          this.downLoading = false;
        });
    },
    每次图片状态改变都会触发 所以触发的时候就可以直接调用文件上传的接口
    如果根据需求 需要额外添加一个保存接口 就换到保存接口触发 一样的
    fileChange (file) {
      this.fileList = [...[], ...[file]];
    },
   
    handleAvatarSuccess (res, file) {
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: "success",
          message: "操作成功"
        });
        this.dialogVisible4 = false
      }
      this.fileList = []
      console.log(this.fileList);
    },


导入
    importHscExcel () {
      if (this.fileList.length) {
        let formdata = new FormData();
        formdata.append("file", this.fileList[0].raw);
        this.$http
          .post(this.nozzle.wuziimportHscExcel, formdata, {
            headers: { "Content-type": "multipart/form-data" },
            responseType: "blob",
          })
          .then((res) => {
            console.log(res);
            if (res.data.size) {
              this.$message({
                message: "上传成功",
                type: "success",
                showClose: true,
              });
            }

            this.fileList = [];
            this.dialogVisible4 = false;
            this.loadGridData()
          })
          .catch((e) => {
          });
      } else {
        this.$alert("请先上传模板数据文件", "提示", {
          confirmButtonText: "确定",
        });
      }
    },

//下载全局方法吗 main.js里面挂载一下
Vue.prototype.$download = (res, type = 'application/vnd.ms-excel') => {
  let fileNames = res.headers['content-disposition']
  let blob = new Blob([res.data], { type: type })
  let fileName = ''
  if (fileNames.indexOf('"') > 0) {
    fileName = decodeURI(fileNames.match(/"(.*)"$/)[1])
  } else {
    fileName = decodeURI(fileNames.match(/=(.*)$/)[1])
  }
  if ('download' in document.createElement('a')) {
    // 非IE下载
    const elink = document.createElement('a')
    elink.download = fileName
    elink.style.display = 'none'
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href) // 释放URL 对象
    document.body.removeChild(elink)
  } else {
    // IE10+下载
    navigator.msSaveBlob(blob, fileName)
  }
}

//表单中作为字段使用 增加删除

         <el-form-item label="上传照片">
            <el-upload class="upload"
                       accept="image/*"
                       list-type="picture-card"
                       action="#"
                       :on-remove="handleRemove1"
                       :on-exceed="handleExceed"
                       :on-preview="handlePreview"
                       :file-list="fileList1"
                       :on-change="changeFile"
                       :auto-upload="false">
              <i class="el-icon-plus">点击上传</i>
            </el-upload>
          </el-form-item>


    <el-dialog :visible.sync="dialogVisiblePIC"
               append-to-body>
      <img width="100%"
           :src="dialogImageUrl" />
    </el-dialog>


    fileChange (file, fileList) {
      // console.log(file);
      this.fileList1 = fileList
      let param = new FormData() //创建form对象
      param.append('file', file.raw) //通过append向form对象添加数据
      param.append('patrolType', 1) //通过append向form对象添加数
      this.dialogInfo.btLoading = true
      gwuploadBatch(param).then(res => {
        if (res.code === 200) {
          var item = res.data[0]
          this.cloudUrl.push(item)
          this.dialogInfo.btLoading = false
        } else {
          this.$message({
            showClose: true,
            message: '文件上传失败,请重新上传并选择小于1M的图片',
            type: 'warning'
          })
          this.dialogInfo.btLoading = false
        }
      })
    },


    handleRemove1 (file, fileList) {
      let index = this.fileList1.findIndex(item => item.name === file.name)
      this.cloudUrl.splice(index, 1)
      this.fileList1 = fileList
    },

    //文件超过限制个数触发
    handleExceed (files, fileList) {
      this.$message({
        message: '当前限制一次只能上传一个文件',
        type: 'warning',
        showClose: true
      })
    },

    //图片预览
    handlePreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisiblePIC = true
    }

.el-icon-plus {
  font-size: 18px;
}