当前位置：首页 > news >正文

Vue中使用axios先获取头像上传参数然后上传图片到服务器-demo

news 2025/6/28 5:54:46

这是一个使用axios发送POST请求上传图片到AWS S3的代码。其中：

引入了axios、FormData和fs模块；
创建FormData实例，向其中添加上传图片的相关信息；
创建axios请求的配置对象config，包含url、method、headers和data等属性；
调用axios.post发送请求，并通过Promise链式调用处理响应和错误。在处理响应时，将返回的数据打印出来。

获取头像上传参数

{"code": "Success","data": {"uploadUrl": "https://broker-exchange-web-test.s3-accelerate.amazonaws.com/","accessUrl": "https://broker-exchange-web-test.s3-accelerate.amazonaws.com/exchange-storage/avatar/1769116539041622664.jpg?nonce=k2f2i2cb","param": {"Policy": "eyJleHBpcmF0aW9uIjoiMjAyMy0wNy0yMFQwMzoxODo1Ny43ODRaIiwiY29uZGl0aW9ucyI6W3sia2V5IjoiZXhjaGFuZ2Utc3RvcmFnZS9hdmF0YXIvMTc2OTExNjUzOTA0MTYyMjY2NC5qcGcifSxbImNvbnRlbnQtbGVuZ3RoLXJhbmdlIiwwLDUyNDI4ODBdLHsiQ29udGVudC1UeXBlIjoiaW1hZ2UvanBlZyJ9LHsiYnVja2V0IjoiYnJva2VyLWV4Y2hhbmdlLXdlYi10ZXN0In0seyJ4LWFtei1hbGdvcml0aG0iOiJBV1M0LUhNQUMtU0hBMjU2In0seyJ4LWFtei1jcmVkZW50aWFsIjoiQUtJQTQ2TkhSMkNNVVFGSE5BMlkvMjAyMzA3MjAvYXAtc291dGhlYXN0LTEvczMvYXdzNF9yZXF1ZXN0In0seyJ4LWFtei1kYXRlIjoiMjAyMzA3MjBUMDMxMzU3WiJ9XX0=","x-amz-date": "20230720T031357Z","x-amz-signature": "5a0cfa2a8e2dc24ca1106a55b37d5d1280d787708dc2185efc574742d3a77e1d","key": "exchange-storage/avatar/1769116539041622664.jpg","x-amz-algorithm": "AWS4-HMAC-SHA256","Content-Type": "image/jpeg","x-amz-credential": "AKIA46NHR2CMUQFHNA2Y/20230720/ap-southeast-1/s3/aws4_request"}}
}

图片上传

const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');
let data = new FormData();
data.append('Policy', 'eyJleHBpcmF0aW9uIjoiMjAyMi0xMS0yM1QwODo0OTozOS4zMDNaIiwiY29uZGl0aW9ucyI6W3sia2V5IjoiZGV2L3VnYy9jb3Zlci8yMDIyMTEwMTExMzgzNTE4NS5wbmcifSxbImNvbnRlbnQtbGVuZ3RoLXJhbmdlIiwwLDEwNDg1NzYwXSx7IkNvbnRlbnQtVHlwZSI6ImltYWdlL3BuZyJ9LHsiYnVja2V0IjoibWVsb2R5LXN0b3JhZ2UtMyJ9LHsieC1hbXotYWxnb3JpdGhtIjoiQVdTNC1ITUFDLVNIQTI1NiJ9LHsieC1hbXotY3JlZGVudGlhbCI6IkFLSUFTMlFUMlJMVzUyTDdTRDY0LzIwMjIxMTIzL2FwLXNvdXRoZWFzdC0xL3MzL2F3czRfcmVxdWVzdCJ9LHsieC1hbXotZGF0ZSI6IjIwMjIxMTIzVDA4MzkzOVoifV19');
data.append('x-amz-date', '20221123T083939Z');
data.append('x-amz-signature', 'c4ad196371d7cf85cec64587173bdaa37216db4ba1444969190e518326325f4f');
data.append('key', 'dev/ugc/cover/20221101113835185.png');
data.append('x-amz-algorithm', 'AWS4-HMAC-SHA256');
data.append('Content-Type', 'image/png');
data.append('x-amz-credential', 'AKIAS2QT2RLW52L7SD64/20221123/ap-southeast-1/s3/aws4_request');
data.append('file', fs.createReadStream('/Users/user/Desktop/20221101113835185.png'));let config = {method: 'post',maxBodyLength: Infinity,url: 'https://melody-storage-3.s3-accelerate.amazonaws.com/',headers: { ...data.getHeaders()},data : data
};axios.request(config)
.then((response) => {console.log(JSON.stringify(response.data));
})
.catch((error) => {console.log(error);
});

这个返回结果包含一个uploadUrl和一个包含上传参数的param对象。要使用这个URL来上传文件，需要使用HTTP POST请求将文件发送到该URL并使用param对象中的参数作为请求头。以下是一个示例使用JavaScript上传图像的代码：

// 假设已经有一个选择文件的input元素
const fileInput = document.querySelector('#file-input');// 发送HTTP POST请求到uploadUrl
const xhr = new XMLHttpRequest();
xhr.open('POST', response.data.uploadUrl, true);// 设置请求头参数
const headers = response.data.param;
for (const key in headers) {if (headers.hasOwnProperty(key)) {xhr.setRequestHeader(key, headers[key]);}
}// 当请求完成时
xhr.onload = function () {if (xhr.status >= 200 && xhr.status < 300) {// 请求成功console.log('上传成功');} else {// 请求失败console.log('上传失败');}
};// 发送文件
xhr.send(fileInput.files[0]);

在实际使用中，还需要适当处理错误情况并可能需要将文件名和其他元数据一起上传。

以下是使用axios上传图片的代码封装：

import axios from 'axios';function uploadImage(file, url) {return new Promise((resolve, reject) => {axios.get(url).then(response => {const { uploadUrl, param } = response.data.data;const formData = new FormData();Object.keys(param).forEach(key => {formData.append(key, param[key]);});formData.append('file', file);axios.post(uploadUrl, formData, {headers: { 'Content-Type': file.type }}).then(() => {resolve(param.accessUrl);}).catch(error => {reject(error);});}).catch(error => {reject(error);});});
}

注意，此处的url是后端接口返回上传图片所需信息的接口地址，file是要上传的图片文件。接口返回的信息中包含了上传图片所需的param参数和uploadUrl，我们需要将其整合到formData中，然后使用axios.post方法上传图片。上传成功后返回accessUrl。

以下是使用axios上传图片代码的封装：

// 封装上传图片的函数
function uploadImage(file) {// 上传图片的接口地址const url = 'https://example.com/upload-image';// 生成一个FormData对象const formData = new FormData();formData.append('image', file);// 发送POST请求return axios.post(url, formData, {// 指定请求头中的Content-Type为multipart/form-dataheaders: {'Content-Type': 'multipart/form-data',},});
}// 假设选择了一个文件，将其上传
const file = document.querySelector('input[type=file]').files[0];
uploadImage(file).then(res => {// 上传成功，返回了上传后的图片地址console.log(res.data.data.accessUrl);}).catch(err => {// 上传失败console.error(err);});

查看全文

http://www.lryc.cn/news/360479.html