<el-upload
        class="upload-demo"
        action="#"
        :show-file-list="true"
        :http-request="fileUpload"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <!-- <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件,且不超过500kb
        </div> -->
      </el-upload>
 data() {
    return {
      fileList: [], //附件上传
      //富文本编辑器配置
      editorOption: {
        // Some Quill options...
      },
      noticeTypeList: [], //获取通知类型
      NoticeShowTimeList: [], //获取通知展示时间
      roleList: [], //获取角色信息
      ruleForm: {
        noticeTitle: "", //通知标题
        noticeType: "", //通知类型
        endTime: "", //截至日期
        displayNum: "", //通知展示时间
        recieverRoles: [], //可查看角色
        noticeContent: "", //公告内容
        fileId: [], //附件上传
      },
      }
 }

 //上传图片
    async fileUpload(file) {
      const data = new FormData();
      data.append("file", file.file);
      let res = await fileUpload(data);
      console.log('33333',res)
      //默认显示文件的名称是name,给的数据是fileName,
      res.data.data = JSON.parse(
        JSON.stringify(res.data.data).replace(/fileName/g, "name")
      );
      this.fileList.push(res.data.data);
      let fileId = this.fileList.map((item) => item.fileId);
      this.ruleForm.fileId = fileId;
    },
    //上传后再删除文件 
    handleRemove(file, fileList) {
      this.fileList = fileList;
      let fileId = this.fileList.map((item) => item.fileId);
      this.ruleForm.fileId = fileId;
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}`);
    },
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐