Bagaimana untuk memuat naik fail dalam vuejs

Kaedah Vuejs untuk melaksanakan muat naik fail: 1. Buat kod halaman Vue; 2. Laksanakan pengesahan saiz sebelum memuat naik melalui kaedah "beforeUpload(file){...}" 3. Laksanakan korelasi fail yang dimuat naik Logik sahaja.

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Bagaimana untuk memuat naik fail dalam vuejs?

vue melaksanakan fungsi muat naik fail

muat naik fail vue untuk rujukan anda, kandungan khusus adalah seperti berikut

Pertama sekali, mari bercakap tentang apa yang anda ingin capai Kesannya

Seperti yang anda lihat dalam tangkapan skrin, syarikat dan fail yang perlu dimuat naik perlu diserahkan ke latar belakang untuk pemprosesan, jadi mari kita bincangkan tentang cara untuk mencapainya

pelaksanaan vue

kod halaman 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>

Pengesahan saiz sebelum memuat naik

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不会自动上传
 },

Penyerahan pengesahan muat naik manual

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();
}

Disyorkan: "Pilihan tutorial video 5 vue.js terkini"

Atas ialah kandungan terperinci Bagaimana untuk memuat naik fail dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!