文件上传的api用axios怎么写

使用 Axios 上传文件的关键在于设置请求头和数据格式，可以参考以下示例代码：

// 创建一个 FormData 对象
const formData = new FormData();
formData.append('file', file);

// 发送 POST 请求
axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then((response) => {
  // 处理响应结果
  console.log(response.data);
}).catch((error) => {
  // 处理错误
  console.error(error);
});

其中，`file` 是要上传的文件对象，`/upload` 是上传文件的 API 地址。在请求头中指定了 `Content-Type` 为 `multipart/form-data`，以便服务器正确地解析数据。使用 Promise 链式调用 `then` 和 `catch` 方法处理响应和错误。

相关问题

用axios调用api的方式实现文件上传

可以使用FormData对象来实现文件上传，并且可以将FormData对象作为参数传递给axios的POST请求。

以下是示例代码：

// 创建FormData对象
const formData = new FormData();
// 添加文件到FormData对象
formData.append('file', file);

// 发送POST请求
axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

其中，`file`是一个文件对象，可以通过文件选择器或拖拽文件的方式获取。`/api/upload`是上传文件的API接口地址。

需要注意的是，需要在请求头中设置`Content-Type`为`multipart/form-data`，以告知服务器这是一个文件上传请求。

先在后端创建文件上传的实体类uploadfile.java，包括文件名，上传日期，文件路径，上传人编号，然后创建uploadfileController，在其中写一个文件上传的api，然后在vue项目中的api文件夹下写一个uploadfile.js，用axios的方式调用后端的文件上传的api，名为upload_f，然后在vue项目的views文件夹下写一个uploadfile.vue，在uploadfile.vue里调用uploadfile.js中的upload_f实现文件上传

的功能。具体步骤如下：

1. 后端创建文件上传的实体类uploadfile.java，包括文件名，上传日期，文件路径，上传人编号等属性。

2. 创建uploadfileController，在其中写一个文件上传的api，实现文件上传的功能。可以使用Spring Boot中的MultipartFile来实现文件上传。

3. 在vue项目中的api文件夹下创建uploadfile.js，用axios的方式调用后端的文件上传的api，名为upload_f。可以使用FormData来构建文件上传的请求。

4. 在vue项目的views文件夹下创建uploadfile.vue，在uploadfile.vue里调用uploadfile.js中的upload_f实现文件上传的功能。可以使用el-upload组件来实现文件上传的界面。

5. 编写测试用例，测试文件上传的功能是否正常。

示例代码：

后端：

1. 实体类uploadfile.java

package com.example.demo.entity;

import java.util.Date;

public class UploadFile {
    private String fileName;
    private Date uploadDate;
    private String filePath;
    private int uploaderId;

    public UploadFile() {}

    public UploadFile(String fileName, Date uploadDate, String filePath, int uploaderId) {
        this.fileName = fileName;
        this.uploadDate = uploadDate;
        this.filePath = filePath;
        this.uploaderId = uploaderId;
    }

    public String getFileName() {
        return fileName;
    }

    public void setFileName(String fileName) {
        this.fileName = fileName;
    }

    public Date getUploadDate() {
        return uploadDate;
    }

    public void setUploadDate(Date uploadDate) {
        this.uploadDate = uploadDate;
    }

    public String getFilePath() {
        return filePath;
    }

    public void setFilePath(String filePath) {
        this.filePath = filePath;
    }

    public int getUploaderId() {
        return uploaderId;
    }

    public void setUploaderId(int uploaderId) {
        this.uploaderId = uploaderId;
    }
}

2. uploadfileController.java

package com.example.demo.controller;

import com.example.demo.entity.UploadFile;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

@RestController
@RequestMapping("api")
public class UploadFileController {

    @PostMapping("/uploadfile")
    public String uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("uploaderId") int uploaderId) {
        if (file.isEmpty()) {
            return "上传失败，请选择文件";
        }

        String fileName = file.getOriginalFilename();
        String filePath = "D:/upload/";
        String dateStr = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());
        fileName = dateStr + "_" + fileName;
        File dest = new File(filePath + fileName);
        try {
            file.transferTo(dest);
            UploadFile uploadFile = new UploadFile(fileName, new Date(), dest.getAbsolutePath(), uploaderId);
            // 保存上传记录
            // save(uploadFile);
            return "上传成功";
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "上传失败！";
    }
}

前端：

1. uploadfile.js

import axios from 'axios'

export function upload_f(file, uploaderId) {
  const formData = new FormData()
  formData.append('file', file)
  formData.append('uploaderId', uploaderId)

  return axios.post('/api/uploadfile', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

2. uploadfile.vue

<template>
  <div>
    <el-upload
      class="upload-demo"
      action=""
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :auto-upload="false"
      :show-file-list="false"
      :on-remove="handleRemove"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
import { upload_f } from '@/api/uploadfile.js'

export default {
  name: 'UploadFile',
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt500K = file.size / 1024 < 500

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt500K) {
        this.$message.error('上传头像图片大小不能超过 500KB!')
      }
      return isJPG && isLt500K
    },
    handleChange(file) {
      const formData = new FormData()
      formData.append('file', file.raw)
      formData.append('uploaderId', 1) // 上传人的编号

      upload_f(formData).then(res => {
        console.log(res.data)
      })
    },
    handleRemove(file) {
      console.log(file, this.fileList)
    }
  }
}
</script>

3. 测试用例

略。