easyui for vue input文件上传功能实现代码

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资料真的太少了。希望对大家有用。