前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >avue上传图片和选择下拉框清空上传的文件

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

作者头像
周杰伦本人
发布2022-10-25 16:59:44
2.6K0
发布2022-10-25 16:59:44
举报
文章被收录于专栏:同步文章

文章目录


需求

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

难点

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

实现

表单是这样的

代码如下:

代码语言:javascript
复制
		{
            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事件:

代码语言:javascript
复制
<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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-11-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 需求
  • 难点
  • 实现
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档