Vuetify 文件上传

Posted 2023-02-22

【中文标题】Vuetify 文件上传

【英文标题】：Vuetify File Uploads

【发布时间】：2019-03-09 18:22:14

【问题描述】：

我正在尝试使用 vuetify 在 Vue.js 中上传文件，然后将上传的文件保存在我的数据对象中。

html：

<input id="file-upload" type="file" @change="onFileChange">

在我调用的方法中：

onFileChange(e) 

  var files = e.target.files || e.dataTransfer.files;
  if (!files.length) 
    return;
     
  this.editedPerson.id_file = e.target.files[0].name;
,

这 100% 有效。

不过，我确实想使用 Vuetify 组件：

<v-btn color="blue-grey" class="white--text" @click.native="openFileDialog">Upload<v-icon right dark>cloud_upload</v-icon></v-btn>

我隐藏了原始文件输入标签，但在这个 v-btn 组件上我调用了以下方法：

openFileDialog() 
  document.getElementById('file-upload').click();
,

所以当我点击 v-btn 组件时，它会模拟点击隐藏文件输入标签，我可以选择一个文件。

在更改输入标签时，我仍然可以控制台记录上传的文件，但是

this.editedPerson.id_file = e.target.files[0].name;

不再有效。

发生这种情况有什么原因吗？

【问题讨论】：

这是我为我的项目构建的一个小型上传组件。看看这是否对你有帮助：Vuetify Upload Component

【参考方案1】：

以下代码对我来说很好用。我已经将 axois 用于 HTTPClient 你可以选择任何东西

<div id="app">
   <v-btn color="blue-grey" class="black--text" @click.native="openFileDialog">
    Upload
    <v-icon right dark> cloud_upload</v-icon>
   </v-btn>
   <input type="file" id="file-upload" style="display:none" @change="onFileChange">
</div> 


Vue.use(Vuetify);
var vm = new Vue(
    el: "#app",
    data: 
        formData: new FormData(),
    ,
    methods: 
        openFileDialog() 
            document.getElementById('file-upload').click();
        ,
        onFileChange(e) 
            var self = this;
            var files = e.target.files || e.dataTransfer.files;       
            if(files.length > 0)
                for(var i = 0; i< files.length; i++)
                    self.formData.append("file", files[i], files[i].name);
                
               
        ,
        uploadFile() 
            var self = this; 
            axios.post('URL', self.formData).then(function (response) 
                console.log(response);
            ).catch(function (error) 
                console.log(error);
            );
        ,
    ,

);

【参考方案2】：

以下代码适用于我。 前端：vue + vuetifyjs + typescript

<template>
  <v-container>
    <v-file-input multiple label="File input" @change="selectFile"></v-file-input>
    <v-btn @click="upload">Upload</v-btn>
  </v-container>
</template>
<script lang="ts">
import  Component, Vue  from 'vue-property-decorator'
import Axios from 'axios'

@Component(
  components: 
)
export default class LogDecode extends Vue 
  currentFile = ''

  selectFile (file: any): void 
    this.currentFile = file[0]
  

  upload (): void 
    const formData = new FormData()
    formData.append('file', this.currentFile)

    Axios.post('/upload', formData)
      .then(response => 
        console.log( response )
      ).catch(error => 
        console.log( error )
      )
  

</script>

服务器端：Golang + Gin

func uploadFile(c *gin.Context) 
    log.Println("upload...")
    file, header, err := c.Request.FormFile("file")
    if err != nil 
        fmt.Println(err)
        c.String(http.StatusBadRequest, "Bad request")
        return
    

    filename := header.Filename
    fmt.Println(file, err, filename)
    
    out, err := os.Create(filename)
    if err != nil 
        log.Fatal(err)
    

    defer out.Close()
    
    _, err = io.Copy(out, file)
    if err != nil 
        log.Fatal(err)
    

    c.String(http.StatusCreated, "upload successful \n")