上传文件

1.0 HTML

<label class="annex">
   上传文件
   <input type="file"  @change="uploadAnnex($event,item)" >
</label>

input file详细使用: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file


2.0 CSS

.annex>input{
    display: none;
}


3.0 上传文件

uploadAnnex(e,item){

  var formData = new FormData;
  formData.append("file",e.target.files[0]);
  formData.append("clauseId",item.id);
  infoEntryUploadPost(formData).then(res => {
    res;
  });
  event.target.value = "";
}


3.1 将文件转为base64上传

uploadAnnex(item){

    var fr = new FileReader();
    fr.readAsDataURL(event.target.files[0]);
    fr.onload = function(){
        
        var formData = new FormData;
        formData.append("file",this.result);
        formData.append("clauseId",item.id);
        infoEntryUploadPost(formData).then(res => {
            res;
        });
    }
    event.target.value = "";
}


其它:通过按钮触发文件上传

<el-button v-auth="'system:role:query'" class="export" type="warning" @click="fillUploadInputRef.click()">导入数据</el-button>
<input ref="fillUploadInputRef" type="file" @change="importData($event)" style="display: none" />


举报

© 著作权归作者所有


1