vue實現文件上傳和下載
本文實例為大傢分享瞭vue實現文件上傳和下載的具體代碼，供大傢參考，具體內容如下
文件上傳
vue中的文件上傳主要分為兩步：前臺獲取到文件和提交到後臺
獲取文件
前臺獲取文件，主要是采用input框來實現
<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">支持擴展名：.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框實現文件上傳；然後通過設置multiple=”multiplt”實現瞭多文件上傳，並且使用accept實現瞭上傳文件類型限制；最後通過監聽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就能獲取到上傳的文件瞭，在上面再次對獲取的文件進行瞭類型限制。
數據提交
獲取到文件數據後，就需要將數據提交到後臺，這裡可以采用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: '附件上傳成功!'
});
}
})
}
在進行數據提交的時候，有兩點需要註意：formData對象和Content-Type，處理好著兩點以後，就和其他的接口一樣瞭。
文件下載
首先是從服務器獲取文件列表，並展示：
<div class="about-file">
<div class="about-file-title">相關材料</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");//創建form表單，以下數form表單的各種參數
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端，有很多文件都試采用下載的方式，但是在手機端，更多的是直接在線打開。如果要實現文件的在線打開，可以借助於a標簽的href屬性實現
<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>
因為使用這種方式進行文件打開的時候，需要有完整的路徑名稱，但是在從後臺獲取到列表的時候，通常是相對路徑，所以需要進行路徑拼接： v-bind:href=”[filePrefix+item.uuid_name]” rel=”external nofollow” rel=”external nofollow”
圖片上傳和預覽
通過在上傳文件以後，就可以拿到文件的名稱進行展示。但是如果是用這種方式進行圖片上傳，展示不再是圖片名稱瞭，而應該是圖片展示。
例如，要實現上面這種效果，使用input進行圖片上傳
<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對象的時候，發現上傳的圖片中包含一個path字段，對應的就是圖片在設備上地址，就想當然的以為可以用這種方式展示圖片，結果很顯然的報錯瞭，在網上查瞭一下才知道，要展示使用input上傳的圖片，需要使用FileReader。
具體的就是，input獲取到的圖片，是不能立即展示的，兩者根本不是一回事，所以，還需要一個數組，用來存放展示的圖片。
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);
}
}
},
這樣，提交數據的時候，使用的是imgArr，而展示的時候，使用的是imgShow
還有一點需要註意的是，這裡還有一個刪除操作，這裡的刪除，不僅是在界面上的不可見，更是代表刪除的這種照片，不需要傳遞到後臺，因此，兩個數組都需要進行刪除
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。