上传实现流程

前端代码

  1. 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">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
    </el-upload>
  2. 引入获取token

    import { getToken } from "@/utils/auth";
  3. data中添加属性

    // 上传参数
    upload: {
    // 是否禁用上传
    isUploading: false,
    // 设置上传的请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // 上传的地址
    url: process.env.VUE_APP_BASE_API + "/common/upload",
    // 上传的文件列表
    fileList: []
    },
  4. 新增和修改操作对应处理fileList参数

handleAdd() {
    ...
  this.upload.fileList = [];
}

handleUpdate(row) {
    ...
  this.upload.fileList = [{ name: this.form.fileName, url: this.form.filePath }];
}
  1. 添加对应事件
// 文件提交处理
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,若需要上传较大文件需要将此配置同时设置。
gf文档:服务配置

文档更新时间: 2021-08-04 17:13   作者:admin