elementUI点上传图片时先走个其他接口再上传图片

需求是点击上传头像时先走一个获取账号的接口,然后再走上传图片接口,

<el-upload class="avatar-uploader" :action="fileUploadPath" :data="uploadParam" :before-upload="beforeUpload"
            :http-request="uploadSectionFile" :on-success="uploadSuccess1" :on-error="uploadError" :limit="1"
            :show-file-list="false" :file-list="fileList">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <span v-else class="icon">上传图片</span>
          </el-upload>
import Vue from 'vue';
  import axios from 'axios'
  export default {
    data() {
      return {
        //回显图片url
        imageUrl: '',
        // 上传图片相关参数
        fileUploadPath: '', // 上传图片路径
        fileList: [], // 上传文件列表
        //临时存储的kf_account
        kf_account: '',
      }
    },
    created() {
      this.fileUploadPath = 上传图片的接口;
    },

    methods: {
      uploadSectionFile(param) {
        this.api.knowledgeBase.addKfAccount().then(res => {
          if (res.status === 200) {
            var fileObj = param.file;
            var form = new FormData();
            form.append("file", fileObj);
            form.append( "kf_account":"${res.result.kf_account}");
            axios({
              method: 'post',
              url: this.fileUploadPath,
              headers: {
                'Content-Type': 'multipart/form-data'
              },
              data: form
            }).then(res => {
              //上传图片接口返回
            })

          } else {
            this.$notify({
              title: '请求失败',
              message: res.message,
              type: 'error'
            });
          }
        }).catch((error) => {})


      },
}

不完整代码,仅供参考。

posted @ 2020-07-24 15:51  开往秋天  阅读(854)  评论(0)    收藏  举报