Vue項目el-upload?上傳文件及回顯照片和下載文件功能實現(xiàn)
更新時間：2023年12月21日 11:55:33 作者：Aohan-z
本次需求是上傳多種固定格式的文件,且回顯的時候,圖片可以正常顯示,文件可以進行下載,主要采用element的el-upload組件實現(xiàn),對Vue項目el-upload?上傳文件及回顯照片和下載文件功能實現(xiàn)感興趣的朋友跟隨小編一起看看吧
本次需求是上傳多種固定格式的文件，且回顯的時候，圖片可以正常顯示，文件可以進行下載
主要采用element的el-upload組件實現(xiàn)
1、文件上傳
先看下，上傳文件效果圖
點擊上傳將文件放到網頁，還有一個點擊確定的按鈕再上傳文件到服務器
html
<el-upload
ref="upload"
accept=".png,.jpg,.jpeg,.doc,.docx,.txt,.xls,.xlsx"
action="#"
multiple
:limit="5"
:headers="headers"
:auto-upload="false"
:file-list="fileList"
:on-change="handleChange"
:on-remove="removeFile"
:on-exceed="limitCheck"
>
<el-button size="small" type="primary">點擊上傳</el-button>
<div slot="tip" class="el-upload__tip">
<p>只支持.png / .jpg / .jpeg / .doc / .docx / .txt / .xls / .xlsx文件</p>
<p>最多上傳5個文件</p>
</div>
</el-upload>1、accept：限制上傳的文件類型
2、action: 必選參數(shù)，上傳的地址，可以暫時設置為"#"
3、multiple: 設置選擇文件時可以一次進行多選
4、limit：限制上傳的文件的數(shù)量
5、auto-upload：是否自動上傳，false為手動上傳
（因為我需要和表單一起添加到服務器，所以點擊上傳時只是到頁面，后面點擊確定才到服務器）
需要注意：當:auto-upload="false"手動上傳的時候，:before-upload="beforeUpload"上傳前校驗失效，兩者不可以同時用，可以將校驗加在:on-change里面
6、file-list：文件列表
script
記得引入
import axios from 'axios'
data() {
return {
// 上傳附件
fileList: [],
headers: {
'Content-Type': 'multipart/form-data'
},
}
},
methods: {
// 文件狀態(tài)改變時的鉤子
handleChange(file, fileList) { // 文件數(shù)量改變
this.fileList = fileList
const isLt2M = (file.size / 1024 / 1024 < 2)
if (!isLt2M) {
this.$message.error('上傳頭像圖片大小不能超過 2MB!')
this.fileList.pop()
}
return isLt2M
},
// 文件超出個數(shù)限制時的鉤子
limitCheck() {
this.$message.warning('每次上傳限制最多五個文件')
},
// 文件刪除的鉤子
removeFile(file, fileList) {
this.fileList = fileList
},
// 點擊確定按鈕 上傳文件
confirm() {
var param = new FormData()
this.fileList.forEach((val, index) => {
param.append('file', val.raw)
})
// 拿取其他的信息
param.append('id', sessionStorage.getItem('id'))
...
axios(`url......`, {
headers: {
'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
'Content-Type': 'multipart/form-data'
},
method: 'post',
data: param
}).then((res) => {
if (res.data.code === 200) {
this.$message.success('上傳成功')
} else {
this.$message.error('上傳失敗')
}
})
}
}2、文件回顯
文件回顯時，只展示上傳的內容
如果上傳圖片，直接展示縮略圖，可進行放大預覽操作
如果上傳其他文件，展示固定的圖片（圖片可自己設置），可在網頁進行下載操作
html
<el-upload
:file-list="fileList"
action="#"
list-type="picture-card"
>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
>
<span class="el-upload-list__item-actions">
// 下載
<span
v-if="updataIf(file)"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download" />
</span>
// 放大預覽
<span
v-else
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in" />
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :append-to-body="true">
<img width="100%" height="100%" :src="dialogImageUrl" alt="">
</el-dialog>script
記得引入
import axios from 'axios'
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
fileList: []
}
},
created() {
this.getDetail()
},
methods: {
// 判斷文件類型,圖片預覽，文件下載
updataIf(e) {
if (e.fileName) {
if (e.fileName.split('.')[1] === 'png' || e.fileName.split('.')[1] === 'jpeg' || e.fileName.split('.')[1] === 'jpg') {
return false
} else {
return true
}
} else {
if (e.name.split('.')[1] === 'png' || e.name.split('.')[1] === 'jpeg' || e.name.split('.')[1] === 'jpg') {
return false
} else {
return true
}
}
},
// 獲取詳情
getDetail() {
this.fileList = []
// 調用查詢的接口
...
...
// 調用成功
if (res.code === 200) {
var arr = []
// res.data.fileMap為返回的Object格式的文件數(shù)據(jù)
// 因為返回的格式是 {name: url,name: url}
// 循環(huán)轉變成需要的數(shù)組格式，每個數(shù)組元素包含name、url、id
// [{name: name,url: ulr,id: id},{name: name,url: ulr,id: id}]
Object.keys(res.data.fileMap).forEach(key => {
var obj = {
name: '',
url: '',
id: ''
}
// 數(shù)組元素里面的name就是key
obj.name = key
// 數(shù)組元素里面的url,當時圖片的時候直接用url
// 當不為圖片的時候,顯示固定的圖片，且傳入id(id用于下載文件)
if (key.split('.')[1] === 'png' || key.split('.')[1] === 'jpeg' || key.split('.')[1] === 'jpg') {
obj.url = 'http://.../file/minio/view/chs/' + res.data.fileMap[key]
} else {
// 所有文件統(tǒng)一圖片
obj.url = require('../../../assets/images/fileImg.png')
obj.id = res.data.fileMap[key]
}
arr.push(obj)
})
// 將組好的格式直接賦值給fileList（文件列表）
this.fileList = arr
}
},
// 放大預覽
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
// 文件下載
handleDownload(file) {
axios(`url.......`, {
headers: {
'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
'Content-Type': 'application/octet-stream'
},
methods: 'get',
params: {
id: file.id
},
responseType: 'blob'
}).then((res) => {
if (res.status === 200) {
const content = res.data
const blob = new Blob([content])
const fileName = file.name
if ('download' in document.createElement('a')) { // 非IE下載
const elink = document.createElement('a')// 創(chuàng)建一個a標簽通過a標簽的點擊事件區(qū)下載文件
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)// 使用blob創(chuàng)建一個指向類型數(shù)組的URL
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 釋放URL 對象
document.body.removeChild(elink)
} else { // IE10+下載
navigator.msSaveBlob(blob, fileName)
}
}
}).catch(res => {
console.log(res)
})
},
}關于type: “application/octet-stream“ 格式的數(shù)據(jù)并下載主要參考下面這篇文章 http://www.dbjr.com.cn/javascript/3086322zm.htm
style
隱藏el-upload上傳
// 隱藏上傳
::v-deep .el-upload.el-upload--picture-card{
display: none;
}
// 隱藏右上角綠色標志
::v-deep .el-upload-list__item-status-label{
display: none !important;
}到此這篇關于Vue項目el-upload 上傳文件及回顯照片和下載文件功能實現(xiàn)的文章就介紹到這了,更多相關Vue el-upload 上傳文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue分頁插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要為大家詳細介紹了Vue3中ref和reactive函數(shù)的使用教程，文中的示例代碼講解詳細，對我們學習Vue有一定的幫助，需要的可以參考一下2022-07-07
今天小編就為大家分享一篇vue里input根據(jù)value改變背景色的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue使用element-ui的el-image的問題分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這是一個實現(xiàn)平滑滾動的函數(shù),可以讓頁面在滾動到指定位置時產生緩動效果,本文給大家介紹了如何在在Vue頁面中實現(xiàn)平滑滾動功能,<BR>,文中詳細的代碼講解供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-12-12
使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例
今天小編就為大家分享一篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)百度搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了使用Vue實現(xiàn)一個樹組件的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
默認情況下,寫在.vue組件中的樣式會全局生效,因此很容易造成組件之間的樣式沖突問題,本文就來介紹一下如何解決此問題,感興趣的可以了解一下2023-12-12
在vue項目中集成graphql(vue-ApolloClient)
這篇文章主要介紹了在vue項目中集成graphql(vue-ApolloClient)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09