avue上传图片和选择下拉框清空上传的文件

---

需求

项目前端用的avue框架 然后要做一个上传附件的表单 上传完附件把图片大小等信息回填到表单中 然后一个选择下拉框清空上传的文件

难点

• 上传文件前 把选中下拉框的值传给后台
• 上传文件后回填部分表单的信息
• 改变下拉框的值清空上传的文件

---

实现

表单是这样的

代码如下：

		{
            label: '渠道',
            prop: 'channel',
            type: 'select',
            rules: [{
                required: true,
                message: '请输入渠道',
                trigger: 'blur'
            }],
            dicData: [{
                label: '大众',
                value: 'tppddz000'
            }, {
                label: '学校',
                value: 'tpschool000',
            }, {
                label: 'tcl',
                value: 'tptcl000'
            }, {
                label: '永创',
                value: 'tpyc000'
            }],
            // editDisabled: true,
        },
        {
            label: '上传应用',
            prop: 'downloadLink',
            type: 'upload',
            loadText: '附件上传中，请稍等',
            span: 24,
            dataType: 'string',
            // listType: 'picture-img',
            data: {
                channel: ''
            },
            propsHttp: {
                res: 'data',
                name:'downloadLink',
                url:'downloadLink',
            },
            accept: 'application/vnd.android.package-archive',
            // listDisplay: false,
            tip: '只能上传apk文件',
            action: '/admin/version/upload',
            showColumn: false,
            limit: 1
        },
		{
            label: '应用icon',
            prop: 'appIconLink',
            type: 'upload',
            listType: 'picture-img',
            loadText: '附件上传中，请稍等',
            accept: 'image/png, image/jpeg',
            data: {
                channel:''
            },
            propsHttp: {
                res: 'data',
                name: 'appIconLink',
                url: 'appIconLink'
            },
            tip: '只能上传jpg/png文件',
            action: '/admin/version/uploadIcon',
        },

之前列表图片一直显示不出来 然后把应用图标的listType: 'picture-img'

watch事件：

<avue-crud
          ref="crud"
          :page="page"
          :data="tableData"
          :permission="permissionList"
          :table-loading="tableLoading"
          :option="tableOption"
          :upload-before="uploadBefore"
          :upload-after="uploadAfter"
          :upload-delete="uploadDelete"
          @on-load="getList"
          @row-update="handleUpdate"
          @row-save="handleSave"
          @search-change="searchChange"
          @size-change="sizeChange"
          @current-change="currentChange"
          @row-del="rowDel"
          v-model="form"
      >
      </avue-crud>
<script>

    watch: {
    'form.channel': {
      handler(n, o) {
        // console.log(n)
        // console.log(o)
        let ssjgid = this.findObject(this.$refs.crud.tableOption.column, 'channel');
        // console.log(this.$refs.crud.tableForm)
        // debugger
          //新值和老值不一样时候即下拉框发生改变的时候 上传文件清空
        if (n != undefined && o != undefined && n != o) {
          this.$refs.crud.tableForm.downloadLink = []
        }
      }
    }
  }
    methods: {
    
    uploadBefore(file, done, loading, column) {
      var downloadLink = this.findObject(this.$refs.crud.tableOption.column, 'downloadLink')
      var appIconLink = this.findObject(this.$refs.crud.tableOption.column, 'appIconLink')

      console.log(this.$refs.crud.tableForm);
      // debugger
      var channelValue = this.$refs.crud.tableForm.channel;
      if (channelValue == "") {
        this.$message.success('上传前请先选择渠道')
        loading();
      } else {
        downloadLink.data.channel = channelValue;
        appIconLink.data.channel = channelValue;
        // debugger
        done();
      }
      // debugger

      // this.$message.success('上传前的方法')
    },
    uploadAfter(res, done, loading) {
      // console.log(res)

      console.log(res.downloadLink)
      done()
      if (res.downloadLink != null) {
        this.$refs.crud.tableForm.appSize = res.appSize
        this.$refs.crud.tableForm.checkCode = res.checkCode
      }
      return this.form.appSize = res.appSize;
    },
    

  }
  </script>

就是uploadBefore事件是上传图片前触发的事件 校验先选择渠道 uploadAfter事件是上传图片后触发的事件 回填文件大小和md5校验码 中的res就是options里的propsHttp中res

watch监听事件 form.channel与表单v-model="form"对应

---

总结

avue真不好整。。

参考博客：
https://blog.csdn.net/leaders_forerver/article/details/108535397?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight