使用vue和fetch进行文件上传怎么写

迷南。 2023-10-07 23:17 8阅读 0赞

首先，需要在 HTML 中添加一个文件选择器和一个提交按钮。

<template>
      <form>
        <input type="file" ref="fileInput" />
        <button type="submit">上传</button>
      </form>
    </template>

然后，在 Vue 组件的 JavaScript 部分中，可以使用 fetch 函数发送文件到服务器。首先，需要获取文件对象，然后创建一个 FormData 对象，并将文件添加到 FormData 中。

<script>
    export default {
      methods: {
        async uploadFile() {
          // 获取文件对象
          const file = this.$refs.fileInput.files[0]
          // 创建 FormData 对象
          const formData = new FormData()
          // 将文件添加到 FormData 中
          formData.append('file', file)
    
          try {
            // 使用 fetch 发送文件到服务器
            const res = await fetch('/upload', {
              method: 'POST',
              body: formData
            })
            console.log(await res.json())
          } catch (err) {
            console.error(err)
          }
        }
      }
    }
    </script>

最后，在表单提交事件中调用上传文件函数。

<template>
      <form @submit.prevent="uploadFile">
        <input type="file" ref="fileInput" />
        <button type="submit">上传</button>
      </form>
    </template>

这样就可以使用 Vue 和 fetch 进行文件上传了。

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关使用vue和fetch进行文件上传怎么写

首先，需要在 HTML 中添加一个文件选择器和一个提交按钮。 <template> <form> <input type="file" r

迷南。/ 2023年10月07日 23:17/ 0 赞/ 9 阅读

相关文件上传的单元测试怎么写？

早上有个群友问了一个不错的问题：文件上传的单元测试怎么写？后面也针对后端开发要不要学一下单元测试的话题聊了聊，个人是非常建议后端开发能够学一下单元测试的。所以，今天特地拿出来写

今天药忘吃喽~/ 2023年01月05日 01:17/ 0 赞/ 144 阅读

相关 VUE_vue使用axios上传文件，post上传文件，文件上传请求头

var formdata = new FormData(); for(var key in fileList){ //选择多文件使用循环遍历添加

た入场券/ 2022年12月07日 11:45/ 0 赞/ 351 阅读

相关使用Vue和Spring Boot实现文件上传

推荐：[Vue学习汇总][Vue] 使用Vue和Spring Boot实现文件上传推荐 [使用Vue和Spring Boot实现文件下载][Vue_Sprin

妖狐艹你老母/ 2022年11月21日 04:08/ 0 赞/ 192 阅读

相关使用struts2进行文件上传

1.写一个简单的jsp页面 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"

朱雀/ 2022年06月05日 02:46/ 0 赞/ 189 阅读

相关使用resumable.js进行文件上传

示例（由于屏幕分辨率的问题，我的截图到了54%的时候我其实是点击了一下暂停，然后再继续的） ![这里写图片描述][70] 可以暂停，可以继续，可以把后端服务停了，然后继续

浅浅的花香味﹌/ 2022年05月22日 12:45/ 0 赞/ 451 阅读

相关使用vue进行移动端上传图

使用input\[type=file\]进行移动端图片上传。 html <div class="header"> <img

刺骨的言语ヽ痛彻心扉/ 2022年05月10日 06:06/ 0 赞/ 238 阅读

相关 Vue上传文件

Vue上传文件上传效果 ![M1KsQW5.jpg][] 上传类型这里的文件暂定义为：doc、docx、rar、zip、pdf、txt【这个

ゞ浴缸里的玫瑰/ 2022年04月17日 21:16/ 0 赞/ 289 阅读

相关 vue-上传文件

<label for="exampleInputFile">头像</label> <img :src=" imgsrc != '' ? imgsrc :'../

妖狐艹你老母/ 2021年12月16日 12:04/ 0 赞/ 338 阅读

相关 web--使用fileupload进行文件上传

FileUpload文件上传 fileUpload是apache的commons组件提供的上传组件，它最主要的工作就是帮我们解析request.getInpustream

红太狼/ 2021年08月13日 18:01/ 0 赞/ 382 阅读