2020-01-04如何上传图片
点击新建渠道商，出现新建渠道商弹框，里面有一个营业执照，营业执照是要上传图片的，那么该如何上传图片呢？
<!--点击新建渠道商,打开新建渠道商对话框-->
<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',
}
}，
