vuetify文件上传 file inputs_vuetifyjs的upload-CSDN博客

本文链接：https://blog.csdn.net/YJX_0403/article/details/105516896

本文介绍了如何利用Vuetify组件库在HTML和JavaScript中实现文件上传功能，包括相关的HTML结构和JavaScript处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分代码

<v-form
       ref="uploadFileForm"
       v-model="uploadFormValid">
   <v-file-input
           v-model="fileInfo"
           required
           :rules="[v => !!v || '文件必选']"
           show-size accept=".xls,.xlsx"
           @change="uploadFile"
           :disabled="loading.uploadIsLoading"
           :loading="loading.uploadIsLoading"
           label="点击选择文件，文件格后缀为：.xls、.xlsx"></v-file-input>
</v-form>

js部分

// 上传文件方法
uploadFile() {
  // console.log(this.fileInfo, '文件信息');
  if (this.$refs.uploadFileForm.validate()) {
    this.loading.uploadIsLoading = true;
    var formData = new window.FormData();
    formData.append('file', this.fileInfo);
    collectorImport(formData).then(res => {
      this.loading.uploadIsLoading = false;
      this.$refs.notify.show("文件上传成功", {timeout: 1000, color: 'success'});
      this.uploadDialog = false;
      this.search();
    }).catch(err => {
      this.loading.uploadIsLoading = false;
    });
  }
},
//collectorImport 是封装的ajax方法，不管用什么ajax请求方法，主要是设置请求头'Content-Type': 'multipart/form-data'
collectorImport(data){
  return request({
    url:'/db/collector/collector-import',
    method:'post',
    data,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}