Element 文件上传 Upload 上传

    <!--按钮-->
	 <el-button
	     v-if="node.data.type === '0'"
	     type="text"
	     size="mini"
	     @click="fileClick(node,data)">
	     <i class="el-icon-upload"></i>
	</el-button>
   <!--添加文件弹窗-->
    <el-dialog :title="fileTitle" :visible.sync="fileShow" width="500px" append-to-body>
      <el-upload
        class="upload-demo"
        action="url"
        :before-upload="beforeFileUpload"
        :multiple="false"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancels">关 闭</el-button>
      </div>
    </el-dialog>
data() {
    return {
      /*文件相关*/
      fileTitle: "上传文件",
      fileShow: false,
      fileList: [],
      fileData: {},
      upload: {
        fileType: null,
        fileName: null,
        parentId: null,
      }
    };
  },
//上传文件
export function addFileUpload(data) {
  return request({
    url: '/system/store/file/upload',
    method: 'post',
    data: data
  })
}
  methods: {
    //上传方法
    beforeFileUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) this.$notify.error({title: '错误', message: '上传头像图片大小不能超过 2MB!'});
      let formData = new FormData();
      formData.append("file", file);
      formData.append("fileType", this.upload.fileType);
      formData.append("parentId", this.upload.parentId);
      formData.append("fileName", this.upload.fileName);
      let name = file.name;
      addFileUpload(formData).then(row => {
        if (row.code == 200) {
          this.fileList.push({name: name})
          this.$notify({
            title: '成功',
            message: '上传成功',
            type: 'success'
          });
        }
      });
      return false;
    },
    //上传文件
    fileClick() {
      this.fileShow = true;
    },
  }

后端

    /**
     * 上传文件资源
     * @param file 文件
     * @param fileType 文件类型 0 指令文件 1 模拟器资源
     * @param fileName 放在那个文件夹下,文件夹名称
     * @return
     */
    @RequiresPermissions("remote:store:add")
    @Log(title = "资源文件", businessType = BusinessType.INSERT)
    @PostMapping("/file/upload")
    public AjaxResult addUpload(@RequestParam("file") MultipartFile file,@RequestParam("fileType")String fileType,@RequestParam("fileName")String fileName,@RequestParam("parentId")String parentId){
        return toAjax(ykFileStoreService.addUpload(file, fileType, fileName,parentId));
    }

效果图
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值