vue+springboot前后端分离上传单个文件

vue+springboot前后端分离上传单个文件

vue上传单个文件

第一步：前端页面

//点击按钮，出现弹框
<el-button type="primary" round @click="visible=true">添加文件</el-button>
//弹框
<el-dialog :visible.sync="visible">
     <el-form>
        <el-form-item label="文件" prop="file">
          <el-input v-model="fileName" :disabled="true"></el-input><br>
          <el-upload class="upload-demo" ref="upload" action="doUpload" :limit="1" :before-upload="beforeUpload">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过5MB</div>
          </el-upload> 
            
         <el-button @click="visible = false">取消</el-button>
         <el-button type="primary" @click="submitUpload()">确定</el-button>        
         </el-form-item> 
         </el-form>
</el-dialog>

第二部：js代码：

//要在data中定义fileName和visible，这里不贴出data，只给出两个方法
//检查文件格式大小等
beforeUpload(file){
      debugger
      console.log(file,'文件');
      this.files = file;
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 xls、xlsx格式!')
        return
      }
      if (!isLt2M) {
        this.$message.warning('上传模板大小不能超过 5MB!')
        return
      }
      this.fileName = file.name;
      return false // 返回false不会自动上传
    },
    //上传文件方法
    //注意，url中的api是我设置的代理，如：
      //proxyTable: {
      //'/api': {
      //  target: 'http://192.168.100.223:8090',
      // changeOrigin: true,
      // pathRewrite: {
      //   '^/api': '' 
      // }
      // }
      // },
    submitUpload() {
      debugger
      console.log('上传'+this.files.name)
      if(this.fileName == ""){
        this.$message.warning('请选择要上传的文件！')
        return false
      }
      let fileFormData = new FormData();
      fileFormData.append('file', this.files, this.fileName);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
      let requestConfig = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
      }
      this.$http.post(`/api/paas/upload`, fileFormData, requestConfig).then((res) => {
        debugger
        if (res && res.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.visible = false
            }
          })
        } else {
          this.$message.error(res.msg)
        }
      }) 
    }

第三步： 后台

	@RequestMapping(value = "/upload")
	public Result upload(@RequestParam("file") MultipartFile file) {
		Result result = new Result();
		result.setCode(200);
		if (file != null) {
			try {
				String fileRealName = file.getOriginalFilename();// 获得原始文件名;
				String filePath = "F:\\F";
				File savedFile = new File(filePath);
				if (!savedFile.exists()) {
					savedFile.mkdirs();
				}
				savedFile = new File(filePath, fileRealName);
				boolean isCreateSuccess = savedFile.createNewFile();
				if (isCreateSuccess) { // 转存文件
					file.transferTo(savedFile); // 第一种
					//FileUtils.copyInputStreamToFile(file.getInputStream(),savedFile); // 第二种
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		} else {
			result.setCode(500);
			result.setMessage("文件为空！");
		}
		// 上传文件 相关逻辑
		return result;
	}

结语

以上方法可以实现单个文件的上传，文件夹的上传，下篇博文更新。
如果有帮助到你，我很开心。