vue文件上传具体代码

以下是一个简单的 Vue 文件上传代码示例：

<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="uploadFile">上传文件</button>
</div>
</template>

<script>
export default {
data() {
return {
file: null,
};
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
},
uploadFile() {
const formData = new FormData();
formData.append("file", this.file);
axios.post("/upload", formData).then((response) => {
console.log(response.data);
});
},
},
};
</script>

请注意，这只是一个简单的示例代码，实际的文件上传代码可能需要更多的逻辑和错误处理。

相关问题

自定义封装Vue手动上传文件代码

好的，以下是一个简单的Vue手动上传文件的代码示例：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileUpload" />
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append("file", this.file);

      // 以下为自定义的上传函数，url为上传接口的地址，data为上传的数据
      this.$http.post(url, formData).then((response) => {
        console.log(response.data);
      });
    },
  },
};
</script>

上面的代码中，我们使用了input标签来实现文件的选择，并将选择的文件保存在data中的file属性中。当点击上传文件按钮时，我们将文件数据转换为FormData对象，并通过自定义的上传函数进行上传。其中，使用了Vue的$http方法来发送POST请求，你需要根据你的实际情况进行修改。

springboot+vue实现文件上传代码

可以的，实现文件上传的代码如下所示：

SpringBoot后端实现：

@RestController
@RequestMapping("/api")
public class FileController {
    @Value("${file.upload.path}")
    private String filePath;
    @PostMapping("/upload")
    public String uploadFile(MultipartFile file) throws IOException {
        // 获取文件名
        String fileName = file.getOriginalFilename();
        // 构建文件路径
        String path = filePath + fileName;
        // 保存文件到本地
        file.transferTo(new File(path));
        return "上传成功！";
    }
}

Vue前端实现：

<template>
  <div class="upload">
    <input type="file" ref="file" @change="uploadFile">
  </div>
</template>

<script>
export default {
  methods: {
    uploadFile() {
      let formData = new FormData();
      formData.append('file', this.$refs.file.files);
      this.$http.post('/api/upload', formData)
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.error(err);
        });
    }
  }
}
</script>

需要注意的是，后端的文件上传路径需要在配置文件中配置，如下所示：

file.upload.path=/data/upload/

另外，这里使用了axios库来发送请求，需要在Vue中安装并引入axios库。