el-input
?修改成?el-upload
?<el-upload
ref="upload"
:limit="1"
accept=".jpg, .png"
:action="upload.url"
:headers="upload.headers"
:file-list="upload.fileList"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">選取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading" @click="submitUpload">上傳到服務(wù)器</el-button>
<div slot="tip" class="el-upload__tip">只能上傳jpg/png文件,且不超過500kb</div>
</el-upload>
token
?import { getToken } from "@/utils/auth";
data
?中添加屬性// 上傳參數(shù)
upload: {
// 是否禁用上傳
isUploading: false,
// 設(shè)置上傳的請(qǐng)求頭部
headers: { Authorization: "Bearer " + getToken() },
// 上傳的地址
url: process.env.VUE_APP_BASE_API + "/common/upload",
// 上傳的文件列表
fileList: []
},
fileList
?參數(shù)handleAdd() {
...
this.upload.fileList = [];
}
handleUpdate(row) {
...
this.upload.fileList = [{ name: this.form.fileName, url: this.form.filePath }];
}
// 文件提交處理
submitUpload() {
this.$refs.upload.submit();
},
// 文件上傳中處理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上傳成功處理
handleFileSuccess(response, file, fileList) {
this.upload.isUploading = false;
this.form.filePath = response.url;
this.msgSuccess(response.msg);
}
系統(tǒng)已經(jīng)封裝了上傳附件及圖片的?adapter
文件路徑:
?./app/common/adapter/upload.go
?
可以根據(jù)情況選擇不同的?adapter
?實(shí)現(xiàn)上傳文件存放位置(本地、云端cos)
# 上傳配置
[upload]
type = "local" #local:本地,tencentCOS:騰訊云 , 七牛云 阿里云等開發(fā)中...
[upload.tencentCOS] #騰訊云cos配置
UpPath = "/gfast/"
RawUrl = "https://您的cos空間域名.cos.ap-chongqing.myqcloud.com"
SecretID = "填寫您的SecretID"
SecretKey = "填寫您的SecretKey"
后端api中直接調(diào)用該adapter可參考:?./app/system/api/upload.go
?
var Upload = new(upload)
// UpImg 單圖上傳
func (c *upload) UpImg(r *ghttp.Request) {
upFile := r.GetUploadFile("file")
info, err := adapter.Upload.UpImg(upFile)
if err != nil {
c.FailJsonExit(r, "上傳失敗,"+err.Error())
}
res := g.Map{
"fileInfo": info,
}
c.SusJsonExit(r, res)
}
注意:上傳參數(shù)時(shí)可以配置的,在系統(tǒng)后臺(tái) >> 系統(tǒng)配置 >> 參數(shù)管理 進(jìn)行附件類型,大小配置。
其中上傳受http服務(wù)配置?ClientMaxBodySize
?參數(shù)影響,客戶端提交的Body大小限制,同時(shí)也影響文件上傳大小,默認(rèn)設(shè)置為8MB,若需要上傳較大文件需要將此配置同時(shí)設(shè)置。
更多建議: