Comment télécharger des fichiers dans vuejs : 1. Créez le code de la page vue ; 2. Utilisez la méthode "beforeUpload(file){...}" pour implémenter la vérification de la taille avant le téléchargement ; 3. Implémentez la logique appropriée de téléchargement de fichiers.
L'environnement d'exploitation de cet article : système Windows 7, vue version 2.9.6, ordinateur DELL G3.
Comment télécharger des fichiers dans vuejs ?
vue implémente la fonction de téléchargement de fichiers
téléchargement de fichiers vue pour votre référence, le contenu spécifique est le suivant
Parlons d'abord de l'effet que vous souhaitez obtenir
Comme vous pouvez le voir sur la capture d'écran, vous devez combiner l'entreprise et les besoins Le fichier téléchargé est soumis en arrière-plan pour traitement, puis parlons de la façon de mettre en œuvre
vue pour implémenter
code de la page 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>
Vérification de la taille avant le téléchargement
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不会自动上传 },
Téléchargement manuel soumission de confirmation
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(); }
Recommandé : "La dernière sélection de 5 didacticiels vidéo vue.js"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!