提供js+vue上传本地文件的示例

可以参考以下代码：

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

<script>
export default {
methods: {
uploadFile(event) {
const file = event.target.files[0];
const formData = new FormData();
formData.append('file', file);

// 发送请求
// 这里可以使用axios或者其他框架进行文件上传
// 以下是伪代码
axios.post('/upload', formData).then((response) => {
console.log(response);
});
}
}
};
</script>

希望这个示例对您有帮助！

相关问题

用springboot+vue+mybatis写一个文件上传功能

好的，这个问题我可以回答。首先，你需要在前端页面中添加一个文件上传的表单，然后使用Vue.js来处理表单的提交事件。在后端，你可以使用Spring Boot来处理文件上传的请求，并使用MyBatis来将文件信息存储到数据库中。

以下是一个简单的示例代码：

前端代码：

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="file" ref="fileInput" />
      <button type="submit">上传文件</button>
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    submitForm() {
      const formData = new FormData();
      formData.append('file', this.$refs.fileInput.files[0]);
      // 发送文件上传请求
      axios.post('/api/upload', formData).then(response => {
        console.log(response.data);
      });
    }
  }
};
</script>

后端代码：

@RestController
@RequestMapping("/api")
public class FileUploadController {

  @Autowired
  private FileService fileService;

  @PostMapping("/upload")
  public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile file) {
    try {
      // 将文件保存到本地
      String fileName = fileService.saveFile(file);
      // 将文件信息存储到数据库中
      fileService.saveFileInfo(fileName, file.getOriginalFilename(), file.getSize());
      return ResponseEntity.ok().body("文件上传成功");
    } catch (Exception e) {
      return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("文件上传失败");
    }
  }
}

@Service
public class FileServiceImpl implements FileService {

  @Autowired
  private FileMapper fileMapper;

  @Override
  public String saveFile(MultipartFile file) throws IOException {
    String fileName = UUID.randomUUID().toString() + "-" + file.getOriginalFilename();
    Path filePath = Paths.get("uploads", fileName);
    Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);
    return fileName;
  }

  @Override
  public void saveFileInfo(String fileName, String originalFileName, long fileSize) {
    FileEntity fileEntity = new FileEntity();
    fileEntity.setFileName(fileName);
    fileEntity.setOriginalFileName(originalFileName);
    fileEntity.setFileSize(fileSize);
    fileMapper.insert(fileEntity);
  }
}

@Mapper
public interface FileMapper {

  @Insert("INSERT INTO file (file_name, original_file_name, file_size) VALUES (#{fileName}, #{originalFileName}, #{fileSize})")
  void insert(FileEntity fileEntity);
}

public interface FileService {

  String saveFile(MultipartFile file) throws IOException;

  void saveFileInfo(String fileName, String originalFileName, long fileSize);
}

public class FileEntity {

  private int id;
  private String fileName;
  private String originalFileName;
  private long fileSize;

  // 省略 getter 和 setter 方法
}

这个示例代码中，我们使用了Vue.js来创建一个简单的文件上传表单，并使用axios库来发送文件上传请求。在后端，我们使用了Spring Boot来处理文件上传请求，并使用MyBatis来将文件信息存储到数据库中。

请代码举例，springboot+vue上传图片

好的，以下是一个简单的 Spring Boot 和 Vue.js 的图片上传示例代码：

Spring Boot 后端代码：

@RestController
public class FileUploadController {

    @PostMapping("/upload")
    public String uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
        // 保存文件到本地
        String fileName = file.getOriginalFilename();
        File dest = new File("uploads/" + fileName);
        file.transferTo(dest);
        return "上传成功！";
    }
}

Vue.js 前端代码：

<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[];
    },
    uploadFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      axios.post('/upload', formData)
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}
</script>

这个示例中，用户可以在前端选择一个图片文件，然后点击上传按钮，将图片文件发送到后端的 `/upload` 接口。后端将图片文件保存到本地的 `uploads` 目录下，并返回一个上传成功的消息。