vue+springboot+element+vue-resource 파일 업로드 튜 토리 얼 구현

vue 페이지 설정

      <el-upload
       class="upload-demo"
       action=""
       :before-upload="beforeUpload" //     
       :before-remove="beforeRemove" //     
       :multiple="false"  //    
       :http-request="myUpload" //    ,        ,action        
       accept=".jar"  //        
       :drag="false"
       :data="param" //  
       :file-list="fileList">//      
       <el-button size="small" type="primary">    </el-button>
       <div slot="tip" class="el-upload__tip">    jar  ，    500kb</div><!-- :headers="head"-->
      </el-upload><!--:on-preview="handlePreview"-->

   /*     ,         ,     */
   beforeUpload(file){
    console.log("   ",file.name,this.fileList)
    for (let i = 0; i <this.fileList.length ; i++) {
     if (this.fileList[i].name==file.name) {
      this.$message.info("     ");
      return false;
     }
    }
    this.file=file;

    return true;
   },
    /*     ,      */
   beforeRemove(file,fileList){//delJar
    this.$confirm('           ,     ?', '  ', {
     confirmButtonText: '  ',
     cancelButtonText: '  ',
     type: 'warning'
    }).then(() => {
     this.$http.get('/aaaa/task/del?taskId='+this.taskId+'&name='+file.name).then(function(res) {
      ......
     });
    }).catch(() => {
     this.getJarList();
     return false;
    });
   },
   /*    ,        ,action        */
   myUpload(file){
    let fd = new FormData();
    fd.append('file',this.file);//   
    fd.append('taskId',this.taskId);//     
    // fd.append('filename',file.name);//     
    this.$http.post('/aaaa/task/add',fd).then(function(res) {
     ....
    });
   },

fileList 대상 의 내용

name:"xxxx.jar"
status:"success"
uid:123456456

매개 변수

this.param={
  taskId:this.taskId
}

springboot 설정
1.요청 한 주석:produces="multipart/form-data;charset=utf-8", method = RequestMethod.POS

  @RequestMapping(value = "/add", produces = "multipart/form-data;charset=utf-8", method = RequestMethod.POST)
  public String addJar(int taskId, HttpServletRequest request) throws IOException, ServletException {
    ....
    //    
    Part part = request.getPart("file");// input name 
    String dis = part.getHeader("Content-Disposition");
    //      --sdsf.jar
    String fna = dis.substring(dis.indexOf("filename=") + 10, dis.length() - 1);
    String fname = fna.substring(fna.lastIndexOf("\\") + 1, fna.length());//            +   
    //        ，          ，  ，      ，    
    if (fname.length() < 1) {
     //        
    }
    ....
  }

추가 지식:elementUI upload 그림 파일 을 지정 한 백 엔 드 인터페이스 에 업로드 하 는 방법
1.일반 백 엔 드 에서 인터페이스 업로드 파일 을 제공 할 때 매개 변수 가 있 습 니 다.만약 우리 가 참 고 를 전달 하지 않 으 면 잘못 보고 하거나 그림 이 존재 하지 않 는 다 고 표시 하여 업로드 에 실패 할 것 입 니 다.그래서 우 리 는 그의 문 서 를 참고 해 야 한다.action 은 업로드 경로;=name===바로 전 삼 의 속성(관건)입 니 다.

imageUrl: '',

<el-form-item label="    " :required="true">
  <el-upload class="avatar-uploader" action="http://xxx.cn/xx/file/uploadImg/" name='photo' :show-file-list="false"
   :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
   <img v-if="imageUrl" :src="imageUrl" class="avatar">
   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</el-form-item>

handleAvatarSuccess(res, file) {
    console.log(res)
    console.log(file)
    this.imageUrl = URL.createObjectURL(file.raw);
    console.log(this.imageUrl)
   },
   //      
   beforeAvatarUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
     this.$message.error('          JPG   !');
    }
    if (!isLt2M) {
     this.$message.error('             2MB!');
    }
    return isJPG && isLt2M;
   },

css 코드

/*     css */
 .avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
 }

 .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
 }

 .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
 }
 .avatar {
  width: 100px;
  height: 100px;
  display: block;
 }

elementUI 문서 참조:https://element.eleme.cn/#/zh-CN/component/upload
이 vue+springboot+element+vue-resource 는 파일 업로드 튜 토리 얼 을 실현 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.