点击新建渠道商，出现新建渠道商弹框，里面有一个营业执照，营业执照是要上传图片的，那么该如何上传图片呢？

<!--点击新建渠道商,打开新建渠道商对话框-->

<el-dialog :close-on-click-modal="false" :visible.sync="newCompany" :modal-append-to-body="false" title="新建渠道商" width="25%" center >

<el-form ref="ruleform" :rules="rules" :model="ruleform" label-width="80px">

<el-form-item label="公司名称" prop="companyName">

<el-input v-model="ruleform.companyName" :maxlength="32" placeholder="请输入"/>

</el-form-item>

<el-form-item label="公司类型" prop="companyType">

<el-input v-model="ruleform.companyType" :maxlength="100" placeholder="请输入"/>

</el-form-item>

<el-form-item label="公司简介" prop="companyDesc" >

<el-input v-model="ruleform.companyDesc" :maxlength="100" placeholder="请输入"/>

</el-form-item>

<el-form-item label="公司地址" prop="companyAddress">

<el-input v-model="ruleform.companyAddress" placeholder="请输入"/>

</el-form-item>

<el-form-item ref="uploadElement" label="营业执照" prop="businessLicense">

<el-input v-if="false"/>

<el-upload

        ref="upload"

        :show-file-list="false"

        :headers="headers"

        :on-success="hadleSuccess"

        :auto-upload="true"

        :data="ruleform"

        :action="doUpload"

        class="avatar-uploader">

<img v-if="ruleform.businessLicense" :src="ruleform.businessLicense" class="avatar">

<i v-else class="el-icon-plus avatar-uploader-icon"/>

</el-upload>

</el-form-item>

<el-form-item label="联系电话" prop="phone">

<el-input v-model="ruleform.phone" placeholder="请输入"/>

</el-form-item>

<el-form-item label="注册时间" prop="regDate">

<el-date-picker

        v-model="ruleform.regDate"

        :editable="false"

        type="date"

        placeholder="选择日期"

        class="date_input"

        value-format="yyyy-MM-dd"/>

</el-form-item>

<el-form-item label="状态" prop="status">

<el-select v-model="ruleform.status" placeholder="请选择" class="date_input">

<el-option

          v-for="iteminoptionsState"

          :key="item.value"

          :label="item.label"

          :value="item.value"/>

</el-select>

</el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">

<el-button :disabled="forbidden" type="primary" class="sure" @click="submitForm('ruleform')">确 定</el-button>

<el-button class="cancel" @click="newCompany= false">取 消</el-button>

</div>

</el-dialog>

上传图片

html

<el-form-item ref="uploadElement" label="营业执照" prop="businessLicense">

<el-input v-if="false"/>

<el-upload

    ref="upload"

    :show-file-list="false"

    :headers="headers"

    :on-success="hadleSuccess"

    :auto-upload="true"

    :data="ruleform"

    :action="doUpload"

    class="avatar-uploader">

<img v-if="ruleform.businessLicense" :src="ruleform.businessLicense" class="avatar">

<i v-else class="el-icon-plus avatar-uploader-icon"/>

</el-upload>

</el-form-item>

js

// 图片上传时使用computed来监听headers

computed: {

headers() {

return {

'Authorization':localStorage.token

    }

}

},

methods: {

// 新建：文件上传成功时的钩子

   hadleSuccess(res, file) {

   console.log('文件上传成功时的钩子', res, file)

   this.ruleform.businessLicense = res.data

   },

}

data（）{

   return{

     doUpload:localStorage.imgBase_url +'/product/savePhoto',

  }

}，

编辑的上传图片跟新建的上传图片一样