Vue 實現附件上傳

後端介面

前端 ui 是用的是 element-ui 的上傳功能

本文主要記錄下**，方便下次複製貼上

選取檔案el-button

>

slot

="tip"

class

="el-upload__tip"

>

支援上傳 } 格式，且不超過 }mdiv

>

el-upload

>

import

from
'@/utils/strutil'
import
from
'@/utils/message'
export
default},
methods:
,// 附件檢查
// 檢查附件是否屬於可上傳型別
// 檢查附件是否超過限制大小
checkfile()
// 檔案型別不屬於可上傳的型別if(
this
.filetype !==
null
&&this
.filetype !==
''&&
!this
.filetype.
includes
(lastsubstring
(item.name,
'.')))
})if(
!flag)
return flag
},// 提交附件
submitupload()
else},
// 自定義檔案上傳方法
uploadfile
(file))}
,// 移除附件
handleremove
(file, filelist)
,// 附件上傳失敗，列印下失敗原因
onerror
(err)
,// 字串重組
strrebuild
(str)
}}

// 字串相關工具類

// 陣列根據分隔符重組為字串
export
function
strrebuild
(arr, split)
if(split === undefined || split ===
null
)var str =
''  arr.
foreach
((v, i)
=>
else})
return str
}// 擷取最後乙個特定字元後面的字串
export
function
lastsubstring
(str, split)
return str.
substring
(str.
lastindexof
(split)+1
)}

import

from
'element-ui'
// 提示封裝 type 提示型別， msg 提示資訊，duration 持續時間
export
function
message
(type, msg, duration))}
// 帶刪除鍵提示，duration 為 0 時，不會自動消失
// 提示封裝 type 提示型別， msg 提示資訊，duration 持續時間
export
function
messageshowclose
(type, msg, duration)
)}

// 附件上傳

export
function
uploadfile
(file)
,    data: file
})}

/**

* 單檔案上傳
* @param files 接收檔案要以陣列接收
* @return
*/(value=
"/uploadfile"
)public
void
uploadfile
(@requestbody multipartfile[
] files)

vue附件上傳

vue附件上傳，需要用到標籤，標籤中的屬性有很多，對應後台的action，設定上傳檔案個數及其他設定 在on success函式中，是上傳成功的 函式，這個地方的處理是後台返回乙個檔案路徑，該標籤繫結了乙個元素為 nowpersoninfo.filesrc 繫結這個元素的目的是為了再上傳的時候，乙個...

java SpringBoot上傳附件

uploadpath c images spring.mvc.static path pattern spring.resources.static locations classpath meta inf resources classpath resources classpath static...

附件 檔案上傳

在前一篇文獻中介紹的檔案上傳，主要是依賴外掛程式的方法實現使用，只是編碼一些伺服器裡面的內容。而今天要介紹的是用編寫的 實現檔案上傳功能，上傳檔案的原理基本一致，只是需要編寫的 相對複雜一點。getattachmentfile 改變事件 getattachmentfile change functi...