如何解决将图像从Vue传输到Express导致图像从文件类型更改
我的目标是将上传的图像从vue传输到Express后端,然后将其上传到Firebase。我遇到的问题是Firebase要求上传的图像是 File 类型的对象。
我认为问题出在以下事实:我的图像从 File 类型对象更改为从前端到Express的其他对象。我使用 FormData()发送它来表达,因为这是express-fileupload处理传入数据所需的内容。
- 这是我的前端代码, received 变量对应于一个 File 对象,该对象是从用户输入中读取的。最后,它记录了response.data,它对应于快递服务器的响应。
let recieved = event.target.files[0]
const formData = new FormData()
formData.append("imageFile",recieved)
await axios.post('http://localhost:4000/recieve',formData,{
headers: {
'content-type': 'multipart/form-data'
}}).then((response) =>
console.log(response.data) //log the response,this is the representation of the image passed by express
)
- 配备了express-fileupload中间件的express服务器读取从Vue发送的多部分表单数据,然后将文件发送回,并记录到控制台。
const express = require('express')
const cors = require('cors')
const fileUpload = require('express-fileupload')
const bodyParser = require('body-parser');
const app = express()
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(express.json());
app.use(fileUpload());
app.use(cors())
//Allow all requests from all domains & localhost
app.all('/*',function(req,res,next) {
res.header("Access-Control-Allow-Origin","*");
res.header("Access-Control-Allow-Headers","X-Requested-With,Content-Type,Accept");
res.header("Access-Control-Allow-Methods","POST,GET");
next();
});
app.post('/recieve',(req,res) => {
res.send(req.files.imageFile) //send the current representation of the file back to vue
})
这是记录到我的浏览器中的内容,记录的第一件事是我通过前端提交的 File 对象,第二件事是发送到Express后的文件。
Firebase无法读取第二个文件(它需要一个File或Blob),因此无法上传,因为从vue发送图像以将 File 对象的变形表达为其他东西的过程。发送文件到快递后,如何阻止文件更改以保留其 File 格式?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。