不得不說vue和elmentui組件配合真是好用到爆，這段時(shí)間在優(yōu)化代碼，整理一下項(xiàng)目當(dāng)中遇到的難點(diǎn)，有一個(gè)頁面是是要上傳文件到后臺(tái)，文件類型有圖片、word、pdf文件。

上傳單張圖片只需要參考elementui官方文檔即可，也可以看下邊的例子：

<el-upload :action="this.$basePath+ '/notes/sysFile/upload'"

? ? ? ? ? :headers="{token: sessionId}" :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadError">

? <img class="photo" :src="imgPath"/>

</el-upload>

在上傳成功的函數(shù)里這樣寫：

uploadSuccess:function (response, file, fileList) {

console.log(response)

this.imgPath =this.$basePath + response.info.fileName //這是核心代碼，將上傳的路徑復(fù)制給放圖片的容器即可

},

如果是上傳多個(gè)文件，那就仔細(xì)看我下邊的代碼，真的是踩了好多次坑才對(duì)el-upload組件里有一個(gè)file-list屬性，專門是針對(duì)上傳多個(gè)文件所使用的，存放的是上傳的文件的列表，廢話不多說，直接上代碼：

<el-upload :action="this.$basePath+ '/notes/sysFile/upload'"

? ? ? ? ? accept=".jpg,.jpeg,.mp3,.mp4,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF" ref="upload"

? ? ? ? ? :headers="{token: sessionId}" :on-success="addUploadSuccess" :on-error="uploadError"

? ? ? ? ? :file-list="fileList">

? <el-button size="small" type="primary" slot="trigger">選擇文件

</el-upload>

我們可以將上傳的文件保存在一個(gè)list列表里邊，直到文件選擇完畢，再將這個(gè)list集合傳給后臺(tái)就可以了，上傳文件成功的函數(shù)里是這樣寫的：

addUploadSuccess:function (response, file, fileList) {

console.log(response)

this.fileInfo.filesList =makeUrls(fileList)

},

因?yàn)轫?xiàng)目里不只是一處地方用到了上傳文件，所以可以把上傳函數(shù)寫到一個(gè)方法里，方便其他地方調(diào)用

function makeUrls(fileList) {

let urls = []

fileList.forEach( item => {

// urls.push(item.response.info.fileName)

? ? urls.push(item.response ? item.response.info.fileName : item.fileName)

})

return urls

}

傳給后臺(tái)的參數(shù)直接在data里邊用這樣的寫法files:this.fileInfo.filesList就行了，

以上就是一種上傳文件的寫法，僅供參考，希望能對(duì)需要的朋友有所幫助。