vue實現(xiàn)文件上傳和下載
更新時間：2021年08月31日 17:23:21 作者：水香木魚
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)文件上傳和下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)文件上傳和下載的具體代碼，供大家參考，具體內(nèi)容如下
文件上傳
vue中的文件上傳主要分為兩步：前臺獲取到文件和提交到后臺
獲取文件
前臺獲取文件，主要是采用input框來實現(xiàn)
<el-dialog :title="addName" :visible.sync="dialogAddFile" width="500px" style="padding:0;" @close="resetAdd">
附件名稱：<el-input v-model="addFileName" autocomplete="off" size="small" style="width: 300px;" ></el-input>
<div class="add-file-right" style="height:70px;margin-left:100px;margin-top:15px;">
<div class="add-file-right-img" style="margin-left:70px;">上傳文件：</div>
<input type="file" ref="clearFile" @change="getFile($event)" multiple="multiplt" class="add-file-right-input" style="margin-left:70px;" accept=".docx,.doc,.pdf">
<span class="add-file-right-more">支持?jǐn)U展名：.doc .docx .pdf </span>
</div>
<div class="add-file-list">
<ul>
<li v-for="(item, index) in addArr" :key="index"><a >{{item.name}}</a></li>
</ul>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitAddFile" size="small">開始上傳</el-button>
<el-button @click="resetAdd" size="small">全部刪除</el-button>
</div>
</el-dialog>
最重要的是這一句代碼：
通過file類型的input框?qū)崿F(xiàn)文件上傳；然后通過設(shè)置multiple="multiplt"實現(xiàn)了多文件上傳，并且使用accept實現(xiàn)了上傳文件類型限制；最后通過監(jiān)聽change事件，前臺獲取到上傳的文件。
getFile(event){
var file = event.target.files;
for(var i = 0;i<file.length;i++){
// 上傳類型判斷
var imgName = file[i].name;
var idx = imgName.lastIndexOf(".");
if (idx != -1){
var ext = imgName.substr(idx+1).toUpperCase();
ext = ext.toLowerCase( );
if (ext!='pdf' && ext!='doc' && ext!='docx'){
}else{
this.addArr.push(file[i]);
}
}else{
}
}
},
通過change事件中的event.target.files就能獲取到上傳的文件了，在上面再次對獲取的文件進(jìn)行了類型限制。
數(shù)據(jù)提交
獲取到文件數(shù)據(jù)后，就需要將數(shù)據(jù)提交到后臺，這里可以采用FormData的方式提交。
submitAddFile(){
if(0 == this.addArr.length){
this.$message({
type: 'info',
message: '請選擇要上傳的文件'
});
return;
}
var formData = new FormData();
formData.append('num', this.addType);
formData.append('linkId',this.addId);
formData.append('rfilename',this.addFileName);
for(var i=0;i<this.addArr.length;i++){
formData.append('fileUpload',this.addArr[i]);
}
let config = {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': this.token
}
};
this.axios.post(apidate.uploadEnclosure,formData,config)
.then((response) => {
if(response.data.info=="success"){this.$message({
type: 'success',
message: '附件上傳成功!'
});
}
})
}
在進(jìn)行數(shù)據(jù)提交的時候，有兩點需要注意：formData對象和Content-Type，處理好著兩點以后，就和其他的接口一樣了。
文件下載
首先是從服務(wù)器獲取文件列表，并展示：
<div class="about-file">
<div class="about-file-title">相關(guān)材料</div>
<ul>
<li v-for="(item, index) in tenEnclosure.rows" :key="index">
<a target="_self" >{{item.tenPencSourname}}</a>
<span @click="toxiazai(index,4,item.tenureId)" title="下載"></span>
<span @click="toshanchu(index,4,item.tenureId)" title="刪除"></span>
</li>
</ul>
</div>
然后完成點擊下載事件：
toxiazai(index,num,id){
var tempForm = document.createElement("form");//創(chuàng)建form表單，以下數(shù)form表單的各種參數(shù)
tempForm.id = "tempForm1";
tempForm.method = "post";
tempForm.action = apidate.downloadEnclosure;
tempForm.target="_";
var hideInput1 = document.createElement("input");
hideInput1.setAttribute('type','hidden');
hideInput1.setAttribute('name','linkId');
hideInput1.setAttribute('id','linkId');
hideInput1.setAttribute('value',id);
tempForm.appendChild(hideInput1);
var hideInput2 = document.createElement("input");
hideInput2.setAttribute('type','hidden');
hideInput2.setAttribute('name','num');
hideInput2.setAttribute('id','num');
hideInput2.setAttribute('value',num);
tempForm.appendChild(hideInput2);
if(document.all){
tempForm.attachEvent("onsubmit",function(){}); //IE
}else{
var subObj = tempForm.addEventListener("submit",function(){},false); //firefox
}
document.body.appendChild(tempForm);
if(document.all){
tempForm.fireEvent("onsubmit");
}else{
tempForm.dispatchEvent(new Event("submit"));
}
tempForm.submit();//提交POST請求
document.body.removeChild(tempForm);
},
文件在線打開
在PC端，有很多文件都試采用下載的方式，但是在手機(jī)端，更多的是直接在線打開。如果要實現(xiàn)文件的在線打開，可以借助于a標(biāo)簽的href屬性實現(xiàn)
<ul>
<li v-for="(item,index) in noticeList" v-bind:key="index" class="person-list" @click="notice(index)">
<div class="person-list-name">
<a v-bind:href="[filePrefix+item.uuid_name]" rel="external nofollow" rel="external nofollow" >{{item.file_name}}</a>
</div>
<div class="person-list-time">上傳時間：{{item.create_time}}</div>
</li>
</ul>
因為使用這種方式進(jìn)行文件打開的時候，需要有完整的路徑名稱，但是在從后臺獲取到列表的時候，通常是相對路徑，所以需要進(jìn)行路徑拼接： v-bind:href="[filePrefix+item.uuid_name]"
圖片上傳和預(yù)覽
通過在上傳文件以后，就可以拿到文件的名稱進(jìn)行展示。但是如果是用這種方式進(jìn)行圖片上傳，展示不再是圖片名稱了，而應(yīng)該是圖片展示。
例如，要實現(xiàn)上面這種效果，使用input進(jìn)行圖片上傳
<div class="list-img">
<ul>
<li v-for="(item,index) in imgArr" :key="index">
<img :src="item.path" alt="" >
<a @click="todel(index)"></a>
</li>
<li>
<div class="addImg" v-if="imgArr.length<3">
<span class="add">上傳圖片</span>
<span class="add">（最多上傳3張）</span>
<input type="file" @change="getFile($event)" accept=".jpg,.png,.bmp,.gif">
</div>
</li>
</ul>
</div>
getFile(event){
var file = event.target.files;
for(var i = 0;i<file.length;i++){
// 上傳類型判斷
var imgName = file[i].name;
var idx = imgName.lastIndexOf(".");
if (idx != -1){
var ext = imgName.substr(idx+1).toUpperCase();
ext = ext.toLowerCase( );
if (ext!='jpg' && ext!='png' && ext!='bmp' && ext!='gif'){
}else{
this.imgArr.push(file[i]);
}
}else{
}
}
},
因為在打印event對象的時候，發(fā)現(xiàn)上傳的圖片中包含一個path字段，對應(yīng)的就是圖片在設(shè)備上地址，就想當(dāng)然的以為可以用這種方式展示圖片，結(jié)果很顯然的報錯了，在網(wǎng)上查了一下才知道，要展示使用input上傳的圖片，需要使用FileReader。
具體的就是，input獲取到的圖片，是不能立即展示的，兩者根本不是一回事，所以，還需要一個數(shù)組，用來存放展示的圖片。
getFile(event){
var file = event.target.files;
let that = this;
for(var i = 0;i<file.length;i++){
// 上傳類型判斷
var imgName = file[i].name;
var idx = imgName.lastIndexOf(".");
if (idx != -1){
var ext = imgName.substr(idx+1).toUpperCase();
ext = ext.toLowerCase( );
if (ext!='jpg' && ext!='png' && ext!='bmp' && ext!='gif'){
}else{
that.imgArr.push(file[i]);
}
}else{
}
//展示上傳的圖片
let reader = new FileReader()
reader.readAsDataURL(file[i])
reader.onload = function(e) {
that.imgShow.push(this.result);
}
}
},
這樣，提交數(shù)據(jù)的時候，使用的是imgArr，而展示的時候，使用的是imgShow
還有一點需要注意的是，這里還有一個刪除操作，這里的刪除，不僅是在界面上的不可見，更是代表刪除的這種照片，不需要傳遞到后臺，因此，兩個數(shù)組都需要進(jìn)行刪除
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue render渲染時間戳轉(zhuǎn)時間,時間轉(zhuǎn)時間戳及渲染進(jìn)度條效果
這篇文章主要介紹了Vue render渲染時間戳轉(zhuǎn)時間,時間轉(zhuǎn)時間戳及渲染進(jìn)度條效果,通過實例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析
這篇文章主要介紹了vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解
今天小編就為大家分享一篇element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了Vue監(jiān)聽數(shù)據(jù)對象變化的源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue3聲明字段名為枚舉的類型方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue-cli配置打包文件本地使用的教程圖解,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
在看這篇文章的幾點要求：需要你先知道Vue-Router是個什么東西，用來解決什么問題，以及它的基本使用。如果你還不懂的話，建議上官網(wǎng)了解下Vue-Router的基本使用后再回來看這篇文章2022-09-09
這篇文章主要介紹了vuex的module模塊用法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue3?自定義圖片放大器效果，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-07-07
vee-validate vue 2.0自定義表單驗證的實例
今天小編就為大家分享一篇vee-validate vue 2.0自定義表單驗證的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08