vue实现文件上传与下载


一、文件上传(多个文件上传)

借鉴博客:https://www.cnblogs.com/yuyujuan/p/10867557.html

  1、文件上传弹窗代码:


        "addFileTitleName" :visible.sync="dialogAddFile" width="500px" style="padding:0;" @close="resetAddFile" >
            "addFileName" autocomplete="off" size="small" style="width: 300px; display: none;" >

            
class="add-file-right" > "file" ref="clearFile" @change="getFile($event)" multiple="multiplt" class="add-file-right-input" style="margin-left:70px;" accept=".docx,.doc,.xls,.xlsx,.ppt,.pptx,.pdf,.txt">
"margin-top: 20px;"> class="add-file-right-more">支持扩展名:.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,txt
class="add-file-list">
"footer" class="dialog-footer"> "primary" @click="submitAddFile" size="small">开始上传 "resetAddFile" size="small">全部删除

  2、文件上传对话框里面对应的参数和上传方法,js代码:

 //============上传文件参数初始化==========================================
  dialogAddFile: false,//上传文件弹窗
  addFileTitleName: "上传文件窗口",
  addFileName: "",
  addArr: [],




三个js方法:
//==================上传文件操作函数=============================================
getFile(event){ //获取上传文件方法
var file = event.target.files;
for(var i = 0;i // 上传类型判断
var imgName = file[i].name;
var idx = imgName.lastIndexOf(".");
if (idx != -1){
var ext = imgName.substr(idx+1).toUpperCase();
ext = ext.toLowerCase( );
//pdg,doc,docx.xls,.xlsx,.ppt,pptx,
if (ext!='pdf' && ext!='doc' && ext!='docx' && ext!='xls' && ext!='xlsx' && ext!='ppt' && ext!='pptx' && ext!='txt'){

}else{
this.addArr.push(file[i]);
}
}else{

}
}
},


submitAddFile(){ //===========提交上传文件到后台保存方法
if(0 == this.addArr.length){
this.$message({
type: 'info',
message: '请选择要上传的文件'
});
return;
}

var formData = new FormData();
for(var i=0;i formData.append('files',this.addArr[i]);
}
let config = {
headers: { "Content-Type": "multipart/form-data" }
};
console.log(formData);
  //接口请求使用的是自己封装了一下的axios
this.$http.post('/transactionController/uploadMyFile', formData, config).then(res => {
console.log(res);

this.$message({
message: '操作成功',
type: 'success'
});

}).catch((error) => {
alert("操作失败,出现错误:" + error)

});

},

//清除上传的文件方法
resetAddFile(){
this.addFileName = "";
this.addArr =[];
},


  3、java后端接口代码:

/**
     * (上传文件)
     * @param file
     * @return
     */
    @RequestMapping( value = "/uploadMyFile", method = RequestMethod.POST)
    @ResponseBody
    public ResultBase uploadMyFile(@RequestParam(value = "files" , required = true) MultipartFile[] files){
        log.info("uploadImg方法上传图片开始");
        ResultBase rb = new ResultBase();
        try {

            log.info("调试打印:" + files.clone());


            rb.setCode(0);
        } catch (Exception e) {
            rb.setCode(1);
            log.error("uploadMyFile方法操作异常:" + e);
        }

        return rb;
    }

  =============亲测无误,前端效果图==========================

相关