Express+vue+element-ui上传图片带参数给后台formData格式
Express+vue+element-ui上传图片时遇到的问题:最重要的问题node+express用multer上传图片当后台接口 upload.single(‘file’) 写的是file时。我们可以直接在action 中写入 接口连接当后台接口 upload.single(‘file’) 写的不是file时。如:此时在action 中写时无法上传图片。这时需要我们使用...
·
Express+vue+element-ui上传图片时遇到的问题:最重要的问题
node+express用multer上传图片
当后台接口 upload.single(‘file’) 写的是file时。
我们可以直接在action 中写入 接口连接
当后台接口 upload.single(‘file’) 写的不是file时。
如:此时在action 中写时 无法上传图片。
这时需要我们使用 http-request (覆盖默认的上传行为,可以自定义上传的实现)。
带参数给后台formData格式数据,实现上传。
切记 传过去FormData 中的名字要和后台Express中的一样如下:
Express 接口代码
//图片上传 用日期命名图片存储的文件夹
//获取时间
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
return currentdate.toString();
}
var datatime = 'public/images/' + getNowFormatDate();
//将图片放到服务器
var storage = multer.diskStorage(
//destination 完整形态
// destination: function (req, file, cb) {
// cb(null, '/tmp/my-uploads')
// },
// destination 是一个函数,负责创建文件夹
destination: datatime,
//filename 给上传文件重命名
filename: function (req, file, cb) {
cb(null, file.originalname);
}
});
var upload = multer({
storage: storage
});
router.post('/uploads', upload.single('file'), function (req, res, next) {
res.send("上传成功")
});
vue + element ui 上传图片代码
<template>
<div>
{{msg}}
<!--上传-->
<!--margin: 0 auto-->
<!--accept 接受上传的文件类型-->
<!--http-request 覆盖默认的上传行为,可以自定义上传的实现-->
<div style="width:300px;height:300px">
<el-upload
class="upload-demo"
action=""
:http-request="upload"
:on-success="Tusuccess"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeAvatarUpload"
:with-credentials="true"
:file-list="fileList"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
<!--弹框-->
<el-dialog
title="提示"
:visible.sync="imgDialogVisible"
width="30%">
<img style="width: 100%" :src="dialogImageUrl" alt="">
<span slot="footer" class="dialog-footer">
<el-button @click="imgDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="imgDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "",
data: function () {
return {
imgDialogVisible: false,
msg: 'This is a Vue project daohang2 --图片上传',
fileList: [{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}, {
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}],
dialogImageUrl: '',
}
},
create: function () {
}, /*渲染前调用*/
mounted: function () {
}, /*渲染后调用*/
methods: {
handleRemove(file, fileList) {
this.$message.success('删除成功');
},
handlePreview(file) {
console.log(file);
this.dialogImageUrl = file.url;
this.imgDialogVisible = true;
},
Tusuccess(response, file, fileList) {
console.log(response)
console.log(file)
console.log(fileList)
},
beforeAvatarUpload(file) {
//const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
/*if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}*/
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
/*return isJPG && isLt2M;*/
return isLt2M;//如果只限制大小只返回isLt2M即可,必须返回,不然不生效
},
upload(file) {
console.log(file);
let fd = new FormData();
fd.append('file', file.file)
var self = this;
this.axios.post("/localhost/uploads",fd)
.then(function (response) {
self.$message.success('上传成功');
})
.catch(function (error) {
self.$message.error('上传失败');
})
}
} /*方法*/
}
</script>
<style scoped>
</style>
github:
vue:
https://github.com/Usered/demo/blob/master/Vue/FirstVue/src/main/daohang2.vue
Express
https://github.com/Usered/demo/blob/master/Express/mydemo/routes/index.js
更多推荐
已为社区贡献3条内容
所有评论(0)