修改文件上传逻辑，当上传文件后自动保存进数据库

guoshilong

2023-03-20 878e3ab4f0bc7969ec7cb289d8b55ac651ea9219

修改文件上传逻辑，当上传文件后自动保存进数据库

 src/api/equipment/equipment.js

@@ -22,13 +22,10 @@
  })
}

export const getAll = (code) => {
export const getAll = () => {
  return request({
    url: '/api/equipment/equipment/all',
    method: 'get',
    params: {
      code
    }
  })
}


 src/views/equipment/equipment.vue

@@ -37,10 +37,15 @@

export default {
  data() {
    let equipmentList = []
    getAll().then(res=>{
      equipmentList = res.data.data
    })
    var validateCode = (rule, value, callback) => {
      if (value) {
        getAll(value).then(res => {
          let data = res.data.data
          let data = equipmentList.filter(e=>{
            return e.code == value
          })
          if (this.form.id) {
            if (data[0].id== this.form.id) {
              callback();
@@ -56,7 +61,6 @@
              callback();
            }
          }
        })
      } else {
        callback(new Error('请输入设备码'));
      }

 src/views/modules/function.vue

@@ -9,8 +9,8 @@
      </div>
      <!-- 头部右侧按钮模块 -->
      <div class="avue-crud__right">
        <div v-if="content.property== 2" class="model-type">
          <el-radio-group size="small" v-model="modelType">
        <div v-if="selectNode.property== 2" class="model-type">
          <el-radio-group size="small" v-model="radioType">
            <el-radio-button label="管理"></el-radio-button>
            <el-radio-button label="预览"></el-radio-button>
          </el-radio-group>
@@ -45,48 +45,51 @@
      <el-col :span="18">
        <div class="func-content">
          <!--开始页-->
          <div class="start" v-if="content.property == 1">
            <div class="start" v-if="content.fileUrl.length>0">
              <img class="start-img" :src="content.fileUrl[0].value">
          <div class="start" v-if="selectNode.property == 1">
            <div class="start" v-if="selectNode.fileUrl.length>0">
              <img class="start-img" :src="selectNode.fileUrl[0].value">
              <div class="start-button-group">
                <el-button disabled type="primary" size="small" v-for="data in contentFunList" :index="data.id" :key="data.id">
                  {{ data.name }}
                <el-button disabled type="primary" size="small" v-for="data in contentList" :index="data.id"
                           :key="data.id">{{ data.name }}
                </el-button>
              </div>
            </div>
            <div v-else>
              <el-empty></el-empty>
            </div>
            <el-empty v-else></el-empty>

          </div>
          <!--内容页-->
          <div class="ddiv" v-if="content.property == 2">

            <div class="manage ddiv" v-if="modelType=='管理'">
          <!--内容页-->
          <div class="ddiv" v-if="selectNode.property == 2">

            <div class="manage ddiv" v-if="radioType=='管理'">
              <!--flash-->
              <div v-if="content.type == 1">
                <avue-form :option="flashOption" v-model="flashForm" @submit="handleSubmitFile"></avue-form>
              <div v-if="selectNode.type == 1">
                <avue-form :option="flashOption" v-model="flashForm" :upload-delete="uploadDelete" @submit="handleSubmitFile"></avue-form>
              </div>

              <!--图册-->
              <div v-if="content.type == 2">
                <avue-form :option="imgOption" v-model="imgForm" @submit="handleSubmitFile"></avue-form>
              <div v-if="selectNode.type == 2">
                <avue-form
                  :option="imgOption"
                  v-model="imgForm"
                  :upload-delete="uploadDelete"
                  @submit="handleSubmitFile"></avue-form>
              </div>

              <!--视频-->
              <div v-if="content.type == 3">
                <avue-form :option="videoOption" v-model="videoForm" @submit="handleSubmitFile"></avue-form>
              <div v-if="selectNode.type == 3">
                <avue-form :option="videoOption" v-model="videoForm" :upload-delete="uploadDelete" @submit="handleSubmitFile"></avue-form>
              </div>
            </div>

            <div class="view ddiv" v-if="modelType == '预览'">
            <div class="view ddiv" v-if="radioType == '预览'">
              <!--flash-->
              <div v-if="content.type == 1">
              <div v-if="selectNode.type == 1">

              </div>

              <!--图册-->
              <div class="ddiv" v-if="content.type == 2">
              <div class="ddiv" v-if="selectNode.type == 2">
                <FlipBook class="flipbook" :pages="flipConfig.pages" :startPage="flipConfig.pageNum" v-slot="flipbook"
                          ref="flipbook">
                  <div class="action-bar">
@@ -103,16 +106,16 @@
              </div>

              <!--视频-->
              <div class="ddiv" v-if="content.type == 3">
              <div class="ddiv" v-if="selectNode.type == 3">
                <iframe class="view-iframe" :src="iframePath"/>
              </div>
            </div>

          </div>
          <!--结束页-->
          <div class="end" v-if="content.property == 3">
            <div class="end" v-if="content.fileUrl.length>0">
              <img class="end-img" :src="content.fileUrl[0].value">
          <div class="end" v-if="selectNode.property == 3">
            <div class="end" v-if="selectNode.fileUrl.length>0">
              <img class="end-img" :src="selectNode.fileUrl[0].value">
            </div>
            <div v-else>
              <el-empty></el-empty>
@@ -145,12 +148,12 @@
export default {
  name: "function",
  props: ['modules'],
  components: {FlipBook,LeftIcon, RightIcon, PlusIcon, MinusIcon},
  components: {FlipBook, LeftIcon, RightIcon, PlusIcon, MinusIcon},
  data() {
    return {
      //所有功能集合
      funList: [],
      contentFunList: [],
      contentList: [],
      // 弹框标题
      title: '',
      // 是否展示弹框
@@ -232,11 +235,11 @@
            type: 'number',
            span: 24,
            display: false,
            rules: [{
              required: true,
              message: "请输入排序",
              trigger: "blur",
            }],
            // rules: [{
            //   required: true,
            //   message: "请输入排序",
            //   trigger: "blur",
            // }],
          },
          {
            label: "页面背景",
@@ -307,6 +310,8 @@
      form: {},

      imgOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '图片',
@@ -314,20 +319,23 @@
            type: 'upload',
            span: 24,
            dragFile: true,
            multiple:true,
            // multiple: true,
            accept: 'image/png, image/jpeg',
            listType: "picture-card",
            propsHttp: {
              res: 'data',
              url: 'link'
            },
            action: "/api/blade-resource/oss/endpoint/put-file-attach"
            action: "/api/function/function/put-file-attach",
            data: {},
          },
        ]
      },
      imgForm: {},

      flashOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: 'flash上传',
@@ -340,13 +348,15 @@
              res: 'data',
              url: 'link'
            },
            action: "/api/blade-resource/oss/endpoint/put-file-attach"
            action: "/api/function/function/put-file-attach"
          },
        ]
      },
      flashForm: {},

      videoOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '视频',
@@ -361,7 +371,7 @@
              res: 'data',
              url: 'link'
            },
            action: "/api/blade-resource/oss/endpoint/put-file-attach"
            action: "/api/function/function/put-file-attach"
          },
        ]
      },
@@ -371,15 +381,18 @@
        children: 'children',
        label: 'name'
      },
      content: {},
      modelType: '管理',

      //当前选中节点
      selectNode: {},
      //管理 预览切换
      radioType: '管理',
      //翻页预览的配置
      flipConfig: {
        pages: [],
        pagesHiRes: [],
        hasMouse: true,
        pageNum: null,
      },
      //视频iframe路径
      iframePath: "",
    }
  },
@@ -402,14 +415,59 @@
        }
      }
    },
    "flashForm.url":{
      handler(newVal){
        console.log(newVal)
      }
    },
    "imgForm.url":{
      handler(newVal){
        console.log(newVal,"---")
        this.flipConfig.pages = []
        if (newVal.length > 0) {
          newVal.forEach(e => {
            this.flipConfig.pages.push(e.value)
          })
        }
      }
    },
    "videoForm.url":{
      handler(newVal){
        console.log(newVal)
        if (newVal.length > 0) {
          let url = data.fileUrl[0].value
          this.iframePath = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
        }
      }
    },
  },
  mounted() {
    this.getAllFunc()
    this.onLoad()
  },
  methods: {
    //返回模块列表页
    backModules() {
      this.$emit('backModules')
    },
    //加载左侧列表
    onLoad() {
      this.getAllFunc()
    },
    loadNode(data){
      let column
      if (data.type == 1) {
        this.flashForm.url = data.fileUrl
        column = this.findObject(this.flashOption.column, "url")
        column.data = {id: data.id}
      } else if (data.type == 2) {
        this.imgForm.url = data.fileUrl
        column = this.findObject(this.imgOption.column, "url")
        column.data = {id: data.id}
      } else if (data.type == 3) {
        this.videoForm.url = data.fileUrl
        column = this.findObject(this.videoOption.column, "url")
        column.data = {id: data.id}
      }
    },
    //获取当前模块id下的所有子功能
    getAllFunc() {
@@ -419,7 +477,7 @@
      getAll(params).then(res => {
        if (res.data.code == 200) {
          this.funList = res.data.data
          this.contentFunList = res.data.data.filter(e => {
          this.contentList = res.data.data.filter(e => {
            return e.property == 2
          })
        }
@@ -436,13 +494,13 @@
        if (filterArray.length > 0) {

          if (form.property == 1) {
            if (form.id != filterArray[0].id){
            if (form.id != filterArray[0].id) {
              this.$message.warning("开始页已存在")
              done()
              return
            }
          } else if (form.property == 3) {
            if (form.id != filterArray[0].id){
            if (form.id != filterArray[0].id) {
              this.$message.warning("结束页已存在")
              done()
              return
@@ -520,44 +578,40 @@
    },
    // 节点点击事件
    handleNodeClick(data) {
      this.content = data
      if (data.property == 2) {
        if (data.type == 1) {
          this.flashForm.url = data.fileUrl
        } else if (data.type == 2) {
          this.imgForm.url = data.fileUrl
          let fileArray = data.fileUrl
          this.flipConfig.pages = []
          if (fileArray.length>0){
            fileArray.forEach(e => {
              this.flipConfig.pages.push(e.value)
            })
          }
        } else if (data.type == 3) {
          this.videoForm.url = data.fileUrl
          if (data.fileUrl.length>0){
            let url = data.fileUrl[0].value
            this.iframePath = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
          }
        }
      }
      this.selectNode = data
      this.loadNode(this.selectNode)
    },
    // 图片提交
    handleSubmitFile(form, done) {
      this.content.fileUrl = form.url
      this.handleSubmit(this.content, done)
      this.selectNode.fileUrl = form.url
      this.handleSubmit(this.selectNode, done)
    },
    //自定义删除方法
    uploadDelete(file,column){
      this.selectNode.fileUrl = this.selectNode.fileUrl.filter(e=>{
        return e.label != file.name
      })
      return new Promise((resolve, reject) => {
        update(this.selectNode).then(res=>{
          if (res.data.code == 200){
            resolve()
          }else {
            reject
          }
        })
      });
    },
  }
}
</script>

<style scoped>
.ddiv{
.ddiv {
  width: 100%;
  height: 100%;
}

.view{
.view {
  background-color: #404040;
}