[英]How do I upload FIle in Vuejs and Expressjs
Hey please am new to Vuejs and Express...So am trying to practice.嘿,请是 Vuejs 和 Express 的新手……所以我正在尝试练习。
So am trying to create a User Profile with comes with a image Using Vuejs and ExpressJs but none of the file or text is uploading.因此,我尝试使用 Vuejs 和 ExpressJs 创建一个带有图像的用户配置文件,但没有上传任何文件或文本。
This is my CreateProfile.vue file这是我的CreateProfile.vue文件
<div class="icon-pic">
<label for="Password">Upload your Logo / Picture</label>
<input type="file" ref="file" @change="handleFileUpload"/>
</div>
<b-input-group class="mb-2">
<b-form-input
id="input-small"
type="text"
placeholder="Enter your Name"
required
:rules="[rules.required]"
v-model="profile.fullname"
></b-form-input>
<b-form-input
id="input-small"
type="text"
placeholder="Enter your BrandName"
v-model="profile.brandname"
></b-form-input>
</b-input-group>
Note : There are other inputs...注意:还有其他输入...
Below is my script functions for the form下面是我的表单脚本函数
<script>
import ProfileService from '@/services/ProfileService'
export default {
data () {
return {
profile: {
fullname: null,
brandname: null,
skill1: null,
skill2: null,
skill3: null,
skill4: null,
socail_handle1: null,
socail_handle2: null
},
file: null,
error: null,
rules: {
required: (value) => !!value || 'Required.'
}
}},
methods: {
handleFileUpload () {
const file = this.$refs.file.files[0]
this.file = file
},
async create () {
this.error = null
const formData = new FormData()
formData.append('file', this.files)
const areAllFieldsFilledIn = Object.keys(this.profile).every(
(key) => !!this.profile[key]
)
if (!areAllFieldsFilledIn) {
this.error = 'Please fill in all the required fields.'
return
}
try {
await ProfileService.post(this.profile, formData)
this.$router.push({
name: 'profile'
})
} catch (error) {
this.error = error.response.data.error
}
}}}
Below is my ProfileController.js file下面是我的ProfileController.js文件
const {Profile} = require ('../models')
const multer = require ('multer')
const fileFilter = (req, file, cb) => {
const allowedTypes = ["image/jpeg", "image/jpg", "image/png"]
if (!allowedTypes.includes(file.mimetype)){
const err = new Error('Incorrect File');
return cb(err, false)
}
cb(null, true)
}
const upload = multer ({
dest: '../public',
fileFilter,
})
module.exports = {
async post (req, res){
try {
upload.single('files')
const profile = await new Profile({
profile: this.profile,
files: req.file
});
profile.save().then(result => {
console.log(result);
res.status(201).json({
message: "Done upload!"
})
})
} catch (err) {
console.log(err)
res.status(500).send({
error: 'An Error has occured trying to fetch'
})}}
Follow by my Model/Profile.js file跟随我的Model/Profile.js文件
module.exports = (sequelize, DataTypes) => {
const Profile = sequelize.define('Profile', {
files: {
type: DataTypes.JSON
},
fullname: {
type: DataTypes.STRING,
allowNull: false
},
brandname: DataTypes.STRING,
skill1: DataTypes.STRING,
skill2: DataTypes.STRING,
skill3: DataTypes.STRING,
skill4: DataTypes.STRING,
socail_handle1: DataTypes.STRING,
socail_handle2: DataTypes.STRING
})
return Profile
}
I hope any one can help me with this please!!!我希望任何人都可以帮助我解决这个问题!!!
This is my route.js file这是我的route.js文件
const AuthController = require('./controllers/AuthController')
const AuthControllerPolicy = require('./policies/AuthControllerPolicy')
const ProfileControler = require('./controllers/ProfileController')
const upload = require ('multer')
module.exports = (app) => {
app.post('/register',
AuthControllerPolicy.register,
AuthController.register)
app.post('/login',
AuthController.login)
app.get('/profile',
ProfileControler.index)
app.post('/upload', upload.single('file'),
ProfileControler.upload)
} }
I notice two things:我注意到两件事:
upload.single('file')
returns a function which should be passed as a middleware in your Express routes. upload.single('file')
返回一个 function ,它应该作为 Express 路由中的中间件传递。 You can use it like this in your route.js
:你可以在你的
route.js
中这样使用它:
const multer = require('multer');
const upload = multer({
dest: '../public',
fileFilter,
});
app.post('/upload', upload.single('file'), ProfileController.post);
Then you can remove the upload code in your post function:然后您可以删除帖子 function 中的上传代码:
module.exports.post = async (req, res) => {
// Multer makes your file available at req.file
const file = req.file;
try {
// Don't need to await when creating a new Mongo object
const profile = new Profile({
profile: this.profile,
files: file
});
// Refactored this to use async/await instead of promises.
// Avoid mixing promises with async/await.
const result = await profile.save();
return res.status(201).json({ message: "Done upload!" });
} catch (error) {
console.log(error)
return res.status(500).send({ error: 'An Error has occured trying to fetch' });
}
}
You're configuring multer to look for a file input named files
: upload.single('files')
, yet in the frontend you're naming it file
(singular): formData.append('file', this.files)
.您正在配置 multer 以查找名为
files
的文件输入: upload.single('files')
,但在前端,您将其命名为file
(单数): formData.append('file', this.files)
。 Usually multer will then throw an unexpected field error .通常 multer 然后会抛出一个意想不到的字段错误。 Make sure these two match exactly .
确保这两个完全匹配。
This free guide for Parsing Requests in Node.js will help you handle file uploads in Node.js.这个免费的 Node.js 中的请求解析指南将帮助您处理 Node.js 中的文件上传。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.