vue實現檔案上傳和下載
阿新 • • 發佈：2021-08-31
本文例項為大家分享了實現檔案上傳和下載的具體程式碼，供大家參考，具體內容如下
檔案上傳
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' &&a
通過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'www.cppcns.com,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) => {
uyIln 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.tenPencSouuyIlnrname}}</a>
<span @click="toxiazai(index,4,item.tenureId)" title="下載"></span>
<span @click="toshanchu(index,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.http://www.cppcns.comsetAttribute('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="vue實現檔案上傳和下載" >
<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
還有一點需要注意的是，這裡還有一個刪除操作，這裡的刪除，不僅是在介面上的不可見，更是代表刪除的這種照片，不需要傳遞到後臺，因此，兩個陣列都需要進行刪除
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。