vuejs에서 파일을 업로드하는 방법

vuejs에서 파일을 업로드하는 방법: 1. vue 페이지 코드를 생성합니다. 2. "beforeUpload(file){...}" 메서드를 사용하여 업로드하기 전에 크기 확인을 구현합니다.

이 기사의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vuejs에서 파일을 업로드하는 방법은 무엇인가요?

vue는 파일 업로드 기능을 구현합니다

vue 파일 업로드는 참고용으로, 구체적인 내용은 다음과 같습니다

먼저 달성하려는 효과에 대해 이야기해 보겠습니다

스크린샷에서 볼 수 있듯이, 기업과 요구 사항을 결합해야 합니다. 업로드된 파일은 처리를 위해 백그라운드로 제출됩니다. 그런 다음

vue 구현 방법에 대해 이야기해 보겠습니다.

vue 페이지 코드 구현

<el-upload
class="upload-demo"
ref="upload"
action="doUpload"
:limit="1"
:file-list="fileList"
:before-upload="beforeUpload">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<a href="./static/moban.xlsx" rel="external nofollow" download="模板"><el-button size="small" type="success">下载模板</el-button></a>
<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
<div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过5MB</div>
<div slot="tip" class="el-upload-list__item-name">{{fileName}}</div>
</el-upload> 
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="submitUpload()">确定</el-button>
</span>

업로드 전 크기 확인

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(&#39;上传模板只能是 xls、xlsx格式!&#39;)
  return
 }
 if (!isLt2M) {
  this.$message.warning(&#39;上传模板大小不能超过 5MB!&#39;)
  return
 }
 this.fileName = file.name;
 return false // 返回false不会自动上传
 },

수동 업로드 확인 제출

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(`/basedata/oesmembers/upload?companyId=`+this.company, fileFormData, requestConfig).then((res) => {
  debugger
  if (data && data.code === 0) {
  this.$message({
  message: '操作成功',
  type: 'success',
  duration: 1500,
  onClose: () => {
  this.visible = false
  this.$emit('refreshDataList')
  }
  })
  } else {
  this.$message.error(data.msg)
  }
 }) 
 }

Backend

/**
 * 上传文件
 */
 @PostMapping("/upload")
 @RequiresPermissions("basedata:oesmembers:upload")
 public R upload(@RequestParam("file") MultipartFile file, @RequestParam("companyId") Integer companyId) {
 System.out.println(companyId);
 if (file.isEmpty()) {
  throw new RRException("上传文件不能为空");
 }
 //上传文件 相关逻辑
 
 return R.ok();
}

추천: "5개의 vue.js 비디오 튜토리얼 중 최신 선택"

위 내용은 vuejs에서 파일을 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!