Heim > Web-Frontend > View.js > So laden Sie Dateien in VueJS hoch

So laden Sie Dateien in VueJS hoch

藏色散人
Freigeben: 2023-01-13 00:45:41
Original
5520 Leute haben es durchsucht

So laden Sie Dateien in vuejs hoch: 1. Erstellen Sie den Vue-Seitencode. 2. Verwenden Sie die Methode „beforeUpload(file){...}“, um die Größenüberprüfung vor dem Hochladen zu implementieren.

So laden Sie Dateien in VueJS hoch

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Wie lade ich Dateien in VueJS hoch?

vue implementiert die Funktion zum Hochladen von Dateien. Sie müssen das Unternehmen und die Anforderungen kombinieren. Die hochgeladene Datei wird zur Verarbeitung an den Hintergrund gesendet. Lassen Sie uns dann darüber sprechen, wie

vue implementiert wird, um

vue-Seitencode zu implementieren

<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>
Nach dem Login kopieren
Größenüberprüfung vor dem Hochladen

beforeUpload(file){
 debugger
 console.log(file,&#39;文件&#39;);
 this.files = file;
 const extension = file.name.split(&#39;.&#39;)[1] === &#39;xls&#39;
 const extension2 = file.name.split(&#39;.&#39;)[1] === &#39;xlsx&#39;
 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不会自动上传
 },
Nach dem Login kopieren

Manueller Upload Bestätigungseinreichung

submitUpload() {
 debugger
 console.log(&#39;上传&#39;+this.files.name)
 if(this.fileName == ""){
  this.$message.warning(&#39;请选择要上传的文件!&#39;)
  return false
 }
 let fileFormData = new FormData();
 fileFormData.append(&#39;file&#39;, this.files, this.fileName);//filename是键,file是值,就是要传的文件,test.zip是要传的文件名
 let requestConfig = {
  headers: {
  &#39;Content-Type&#39;: &#39;multipart/form-data&#39;
  },
 }
 this.$http.post(`/basedata/oesmembers/upload?companyId=`+this.company, fileFormData, requestConfig).then((res) => {
  debugger
  if (data && data.code === 0) {
  this.$message({
  message: &#39;操作成功&#39;,
  type: &#39;success&#39;,
  duration: 1500,
  onClose: () => {
  this.visible = false
  this.$emit(&#39;refreshDataList&#39;)
  }
  })
  } else {
  this.$message.error(data.msg)
  }
 }) 
 }
Nach dem Login kopieren

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();
}
Nach dem Login kopieren

Empfohlen: „

Die neueste Auswahl von 5 vue.js-Video-Tutorials

Das obige ist der detaillierte Inhalt vonSo laden Sie Dateien in VueJS hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage