小白第四课 - 上传本地文件

一. HTML部分

<div class="add-file-right" style="height:70px;margin-left:100px;margin-top:15px;">
   <div class="add-file-right-img" style="margin-left:70px;">上传文件:</div>
   <input type="file" ref="clearFile" @change="getFile($event)" multiple="multiplt" class="add-file-right-input" style="margin-left:70px;" accept="">
</div>
<div class="add-file-list">
   <ul>
     <li v-for="(item, index) in addArr" :key="index"><a >{{item.name}}</a></li>
   </ul>
</div>
<div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitAddFile" size="small">开始上传</el-button>
    <el-button @click="" size="small">全部删除</el-button>
</div>
  • 注意!!!最重要的是以下这句话
    <input type="file" ref="clearFile" @change="getFile($event)" multiple="multiplt" class="add-file-right-input" style="margin-left:70px;" accept=".docx,.doc,.pdf">
    
  • 通过file类型的input框实现文件上传;然后通过设置multiple=”multiplt”实现了多文件上传,并且使用accept实现了上传文件类型限制;最后通过监听change事件,前台获取到上传的文件。

二. JS部分

//1. 接收已选择的本地文件
getFile(event){
    var file = event.target.files;
    for(var i = 0;i<file.length;i++){
          this.addArr.push(file[i]);
        }
},

//2. 提交数据至后台
submitAddFile(){
    var that = this;
    //验证是否为空
    if(0 == this.addArr.length){
       this.$message({
         type: 'info',
         message: '请选择要上传的文件'
       });
       return;
     }
     //将数组传入FormData,最后上传FormData
     let formData = new FormData();
     this.addArr.forEach((img,index) => {
       formData.append(`file`,img)
     })
     let config = {
       headers: {
         'Content-Type': 'multipart/form-data',
       }
     };

     axiospost('/eapp-isv-ltc/ltc/warehouse/uploadFile',formData,config)
       .then((response) => {
         if (res.data.status == "success") {
           that.$notify({
             message: "添加成功!",
             type: "success",
             duration: 1500
           });
         }else {
           that.$notify({
             message: "添加失败!",
             type: "warning",
             duration: 1500
           });
         }
       })
},