點(diǎn)擊新建渠道商丈攒，出現(xiàn)新建渠道商彈框褥实，里面有一個(gè)營(yíng)業(yè)執(zhí)照遍希，營(yíng)業(yè)執(zhí)照是要上傳圖片的讲衫，那么該如何上傳圖片呢？
<!--點(diǎn)擊新建渠道商,打開新建渠道商對(duì)話框-->
<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="請(qǐng)輸入"/>
</el-form-item>
<el-form-item label="公司類型" prop="companyType">
<el-input v-model="ruleform.companyType" :maxlength="100" placeholder="請(qǐng)輸入"/>
</el-form-item>
<el-form-item label="公司簡(jiǎn)介" prop="companyDesc" >
<el-input v-model="ruleform.companyDesc" :maxlength="100" placeholder="請(qǐng)輸入"/>
</el-form-item>
<el-form-item label="公司地址" prop="companyAddress">
<el-input v-model="ruleform.companyAddress" placeholder="請(qǐng)輸入"/>
</el-form-item>
<el-form-item ref="uploadElement" label="營(yíng)業(yè)執(zhí)照" 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="聯(lián)系電話" prop="phone">
<el-input v-model="ruleform.phone" placeholder="請(qǐng)輸入"/>
</el-form-item>
<el-form-item label="注冊(cè)時(shí)間" 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="狀態(tài)" prop="status">
<el-select v-model="ruleform.status" placeholder="請(qǐng)選擇" 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="營(yíng)業(yè)執(zhí)照" 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
// 圖片上傳時(shí)使用computed來監(jiān)聽headers
computed: {
headers() {
return {
'Authorization':localStorage.token
? ? }
}
},
methods: {
// 新建：文件上傳成功時(shí)的鉤子
? ?hadleSuccess(res, file) {
? ?console.log('文件上傳成功時(shí)的鉤子', res, file)
? ?this.ruleform.businessLicense = res.data
? ?},
}
data（）{
? ?return{
? ? ?doUpload:localStorage.imgBase_url +'/product/savePhoto',
? }
}孵班，
