1、先看效果展示。
2、html代码
<div class="formStyle_list">
<div class="f-l">
<Label for="file" class="f-l">证书文件</Label>
<TextBox inputId="file" name="file" v-model="MenberDialogForm.CertFileName" v-if="MenberDialogForm.CertFileName" readonly style="width: 24em"><span class="c-red starpos">*</span></TextBox>
<div class="upload_file">
<i class="iconfont iconshangchuanicon"></i>
<span>上传证书文件</span>
<input class="upload" type="file" id="file" accept=".p12" @change="uploadEvent">
</div>
</div>
</div>
3、vue核心代码部分。
// 上传证书文件
uploadEvent (e) {
this.file = e.target.files[0];
let formData = new window.FormData();
formData.append('file', this.file);
uploadFile(formData, {
headers: { 'Content-Type': 'multipart/form-data' },
transformRequest: [
data => {
return data;
}
]
}).then(res => {
this.MenberDialogForm.CertFileName = res.Result.Data;
});
},
4、备注:里面用到的变量如:this.MenberDialogForm.CertFileName都是字符串类型,直接在vue data属性里面定义就可以了。
因为最近做项目,公司采用vue easyui,本功能研究了好久才实现,网上关于vue easyui资料真的太少了。希望对大家有用。