:headers="upload.headers"
:file-list="upload.fileList"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false">
选取文件
上传到服务器
只能上传jpg/png文件,且不超过500kb
import { getToken } from "@/utils/auth";
// 上传参数
upload: {
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/common/upload",
// 上传的文件列表
fileList: []
},
-
新增和修改操作对应处理
fileList
参数
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);
}
后端代码
系统已经封装了上传附件及图片的
adapter
文件路径:
./app/common/adapter/upload.go
可以根据情况选择不同的
adapter
实现上传文件存放位置(本地、云端cos)
# 上传配置
[upload]
type = "local" #local:本地,tencentCOS:腾讯云 , 七牛云 阿里云等开发中...
[upload.tencentCOS] #腾讯云cos配置
UpPath = "/gfast/"
RawUrl = "https://您的cos空间域名.cos.ap-chongqing.myqcloud.com"
SecretID = "填写您的SecretID"
SecretKey = "填写您的SecretKey"
后端api中直接调用该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)
}
注意:上传参数时可以配置的,在系统后台 >> 系统配置 >> 参数管理 进行附件类型,大小配置。
其中上传受http服务配置
ClientMaxBodySize
参数影响,客户端提交的Body大小限制,同时也影响文件上传大小,默认设置为8MB,若需要上传较大文件需要将此配置同时设置。