vue3-ElementPlus上传&下载文件【代码】

原创已于 2023-12-01 13:50:23 修改 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2023-08-29 10:38:16 首次发布

Vue 专栏收录该内容

13 篇文章

订阅专栏

上传

<template>
  <el-upload ref="upload" :auto-upload="false" accept="" :show-file-list='false' :on-change="handleChangeUpload"
    action="#" class="upload-demo" multiple>
    <el-button type="primary">Click to upload</el-button>
  </el-upload>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, toRefs, watch, onActivated } from 'vue'
// import { fileUpload } from '@/api/grid/common'
function handleChangeUpload(file) {
  let formData = new FormData()
  formData.append('文件', file.raw)
  fileUpload(formData).then(res => {//fileUpload换成你自己接口
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: '上传成功',
      })
    } else {
      ElMessage.error(res.message)
    }
    // console.log(res);
  }).finally()
}
</script>

<el-upload
  ref="upload"
  :limit="1"
  accept=".jpg, .png"
  :action="upload.url"
  :headers="upload.headers"
  :file-list="upload.fileList"
  :on-progress="handleFileUploadProgress"
  :on-success="handleFileSuccess"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

<script>
// 上传参数
upload: {
  // 是否禁用上传
  isUploading: false,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: process.env.VUE_APP_BASE_API + "/common/upload",
  // 上传的文件列表
  fileList: []
},
</script>

下载

<el-button
  size="mini"
  type="text"
  icon="el-icon-edit"
  @click="handleDownload(scope.row)"
>下载</el-button>

<script>
// 文件下载处理
handleDownload(row) {
  var name = row.fileName;
  var url = row.filePath;
  var suffix = url.substring(url.lastIndexOf("."), url.length);
  const a = document.createElement('a')
  a.setAttribute('download', name + suffix)
  a.setAttribute('target', '_blank')
  a.setAttribute('href', url)
  a.click()
}
</script>