element文件上传


          <!--货品图片上传-->
          <el-upload
            ref="uploadImg"
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :before-upload="fileBeforeSuccess"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传图片</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
          </el-upload>
          <!--货品图片上传-->

在这里插入图片描述

methods里面:上传的方法:

  fileBeforeSuccess(file) {//上传文件成功之前
    this.fileUp = file //保存下来的
   /* console.log("保存下来的11", this.fileUp)*/
  },

组件会自动保存刚刚上传的文件下来,
我们只需要把这个file取出来,赋值给我们自己定义的变量fileUp。
(在data里先定义好:fileUp=‘’)

在这里插入图片描述
此处做的是包含上传图片的货品新增功能,故新增方法为:

 sureNewGoodsBtn() {//确认新增
   /*   this.$refs.uploadImg.submit()*/

    let fileSure = this.fileUp
   /* console.log("fileSure", fileSure)*/
    /*获取大类编号*/
    const big = this.queryBigType
    let bigg = big.split('-')
    const classCode = bigg[0]
    /*获取大类编号*/

    /*获取小类编号*/
    const small = this.querySmallType
    let smallll = small.split('-')
    const sectionCode = smallll[0]
    /*获取小类编号*/

    let formdata = new FormData();
    formdata.append('photo', fileSure)
    formdata.append('meetingCode', this.meetingCodeList)
    formdata.append('groupCode', this.groupCodeList)
    formdata.append('series', this.newseries)
    formdata.append('batch', this.newbatch)
    formdata.append('classCode', classCode)
    formdata.append('sectionCode', sectionCode)
    formdata.append('goodsCode', this.newgoodsCode)
    formdata.append('sortCode', this.sortCode)
    if ( fileSure =='' || this.newseries=='' || this.newbatch=='' || classCode=='' || sectionCode=='' || this.newgoodsCode=='' || this.sortCode==''){
      this.$message({
        type: 'warning',
        message: '不能有值为空!'
      });
    }else {
      addGoods(formdata).then(res => {
        if (res.data.head.success) {
          this.$message({
            type: 'success',
            message: '上传成功!'
          });
          this.searchGoods()
        } else {
          this.$message({
            type: 'warning',
            message: res.data.head.message
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '上传失败'
        });
      })
      this.dialogSetupVisible = false
      this.searchGoods()
    }

  },

将所有要上传的信息包裹进一个formdata里面。

ps:formdata的接口协议写法如下:

/*新增商品*/
export const addGoods =  formdata  =>{
  return request({
    method: 'POST',
    headers:{
      'Content-Type':'multipart/form-data;charse=UTF-8'
    },
    url:'/revicewServices/staff/addGoods',
    data:formdata
  })
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值