前提:因为需求允许上传文件或不上传文件,尝试了用element-ui的upload写上传,探究怎样写最简洁

一、使用formdata

<el-upload
    ref="upload"
    class="avatar-uploader"
    :action="VUE_APP_BASE_API+'/sysBase/updateSysBase?trackId='+trackId"
    name="file"
    :multiple="false"
    :show-file-list="false"
    :auto-upload="false"
    :before-upload="beforeUpload"
    :on-change="changePic"
    :http-request="submitUpload"
    :on-success="handleAvatarSuccess"
    >
    <!-- eslint-disable -->
    <img v-if="newImageUrl" :src="newImageUrl" class="avatar" />
    <img v-else-if="imageUrl" :src="imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-button type="primary" size="small" class="btn-sure" :disabled="sureDisabled" @click="submitAddForm">确 定</el-button>

重点::http-request="submitUpload"

methods如下

    submitUpload(content) {
      const formData = new FormData()
      formData.append('file', content.file)
      formData.append('id', this.config.id)
      formData.append('kdmc', this.config.kdmc)
      formData.append('kddz', this.config.kddz)
      formData.append('jd', this.config.jd)
      formData.append('wd', this.config.wd)
      updateSysBase(formData)
        .then(resp => {
          this.showSuccessInfo(resp.msg)
          this.newImageName = ''
          this.$store.dispatch('GetConfig')
        })
        .finally(() => {
          this.sureDisabled = false
        })
    },
    submitAddForm() {
      this.$refs.config.validate(async result => {
        if (result) {
          if (this.newImageName) {
            await this.$refs.upload.submit()
          } else {
            this.config.logoImage = ''
            updateSysBase(this.config)
              .then(resp => {
                this.showSuccessInfo(resp.msg)
                this.newImageName = ''
                this.$store.dispatch('GetConfig')
              })
              .finally(() => {
                this.sureDisabled = false
              })
          }
        }
      })
    }

axios请求

export function updateSysBase(data) {
  return request({
    url: '/sysBase/updateSysBase',
    method: 'post',
    data: data,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

request.js 也要相应改下trackId的携带方式,因为后台是在url所带参数那里判断的

if (config.data instanceof FormData) {
    // config.data.append('trackId', getToken())
    config.params = {
        trackId: getToken()
    }
}

二、不使用formData,发现其实不用formData写的代码更少一点

<el-upload
    ref="upload"
    class="avatar-uploader"
    :action="VUE_APP_BASE_API+'/sysBase/updateSysBase?trackId='+trackId"
    name="file"
    :multiple="false"
    :with-credentials="true"
    :data="config"
    :show-file-list="false"
    :auto-upload="false"
    :before-upload="beforeUpload"
    :on-change="changePic"
    :on-success="handleAvatarSuccess"
    >
    <img v-if="newImageUrl" :src="newImageUrl" class="avatar" />
    <img v-else-if="imageUrl" :src="imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-button type="primary" size="small" class="btn-sure" :disabled="sureDisabled" @click="submitAddForm">确 定</el-button>

重点::with-credentials="true"  :data="config"

methods如下

    submitAddForm() {
      this.$refs.config.validate(async result => {
        if (result) {
          this.sureDisabled = true
          if (this.newImageName) {
            await this.$refs.upload.submit()
          } else {
            this.config.logoImage = ''
            updateSysBase(this.config)
              .then(resp => {
                this.showSuccessInfo(resp.msg)
                this.newImageName = ''
                this.$store.dispatch('GetConfig')
              })
              .finally(() => {
                this.sureDisabled = false
              })
          }
        }
      })
    }

 

Logo

前往低代码交流专区

更多推荐