上传文章来源:https://www.toymoban.com/news/detail-684511.html
<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>
下载文章来源地址https://www.toymoban.com/news/detail-684511.html
<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>
到了这里,关于vue3-ElementPlus上传文件【代码】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!