axios.post上传图片

以下是使用axios.post上传图片的示例代码：

import axios from 'axios';

// 选择图片文件
const file = document.querySelector('input[type="file"]').files[0];

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

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

上述代码中，我们首先通过`document.querySelector`方法获取了一个`<input>`元素，然后从中选择了第一个文件。接着，我们创建了一个`FormData`对象，并将选中的文件添加到其中。最后，我们使用`axios.post`方法向服务器发送POST请求，并将`FormData`对象作为请求体发送。在请求头中，我们设置了`Content-Type`为`multipart/form-data`，以告诉服务器我们发送的是一个包含文件的表单数据。

相关问题

vue使用axios发送post请求上传照片

首先需要安装axios和qs：

npm install axios qs --save

然后在Vue组件中引入axios：

import axios from 'axios'
import qs from 'qs'

然后在发送POST请求时，需要将请求头中的`Content-Type`设置为`multipart/form-data`，并使用FormData来包装请求数据。示例代码如下：

let formData = new FormData()
formData.append('file', file) // file为照片文件
axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

在后端服务器中，可以使用如下代码来处理上传的文件：

const express = require('express')
const app = express()
const multer = require('multer')

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname)
  }
})

const upload = multer({ storage: storage })

app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file)
  res.send('上传成功')
})

app.listen(3000, () => {
  console.log('Server is running...')
})

其中，`upload.single('file')`表示只处理名为`file`的文件。`req.file`表示上传的文件信息。

let file = e.target.files[0]; this.url_1 = this.$options.methods.getObjectURL(file); console.log("uname:" + this.$route.query.uname); let uname = this.$route.query.uname; let param = new FormData(); //创建form对象 param.append("file", file, file.name); //通过append向form对象添加数据 param.append("uname", uname) var timer = setInterval(() => { this.myFunc(); }, 30); let config = { headers: {"Content-Type": "multipart/form-data"}, }; //添加请求头 axios .post(this.server_url + "/upload", param, config) .then((response) => { this.percentage = 100; clearInterval(timer); this.url_1 = response.data.image_url; this.srcList.push(this.url_1); this.url_2 = response.data.draw_url; this.srcList1.push(this.url_2); this.fullscreenLoading = false; this.loading = false;

这段代码看起来是一个前端页面中上传文件的处理逻辑。当用户上传一个文件后，会将文件转化为一个 FormData 对象，并添加一些其他参数，如用户名，然后通过 axios 发送一个 POST 请求到服务器的 /upload 接口。在服务器处理上传文件的过程中，前端会每隔 30 毫秒调用一个 myFunc 函数，来更新上传进度条的显示。当上传完成后，会将服务器返回的图片地址存储到前端的 srcList 数组中。