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