elementui 上传图片,elementui多图片上传
在做项目的时候遇到一个问题，前端需要上传表单到后端，表单数据包括文本内容和图片，这篇文章主要给大家介绍了关于某视频剪辑软件如何使用元素-用户界面表单发送数据与多张图片到后端的相关资料，需要的朋友可以参考下
在做项目的时候遇到一个问题，前端需要上传表单到后端，表单数据包括文本内容和图片，后端我用的是Nodejs，效果类似下图
前端需要向后端传商品名称，价格，描述，商品图片
前端准备，利用元素-用户界面中的表单功能和上传功能，将上传代码嵌套在表单中，代码如下
模板
div class=内容
div class=" form "
El-Form ref= Form :model= Form label-width= 80px
El-表单-项目标签=商品名称
埃尔输入v-model=Form.name/el输入
/El-表单-项目
El-表单-项目标签=商品价格
埃尔-输入v-model=形式。价格/El-输入
/El-表单-项目
El-表单-项目标签=商品描述
埃尔输入v-model=Form.description/el输入
/El-表单-项目
埃尔-表单-项目
埃尔-上传
action=/api/users/addProduct
list-type=图片卡
:on-preview= handlePictureCardPreview
:on-remove=handleRemove
:上传前=产品上传前
i class=el-icon-plus/i
/El-上传
El-dialog:可见。sync=对话框可见
img width= 100% :src= dialogImageUrl alt=
/el-dialog
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= submit 立即创建/el-button
埃尔按钮取消/el-button
/El-表单-项目
/el格式
/div
/div
/模板
需要注意的是，上传中的行为传的是对应的后端接口
在上传图片前，需要先将图片转成base64格式的字符串后再上传给后端，这里定义了产品上传前函数进行转码处理
beforeProductUpload(文件){
var _this=this
返回新承诺（功能（解决，拒绝){
var reader=new FileReader()
reader.readAsDataURL(file)//这里是最关键的一步，转换成base64
reader.onload=函数（事件){
_这个Form.imageurl.push(事件。目标。结果)//定义参数获取图片路径
}
})
脚本部分的代码
脚本
导出默认值{
data() {
返回{
表单：{
名称：,
imageurl:[]，
价格：,
描述：""
},
dialogImageUrl:" "，
dialogVisible: false
};
},
方法：{
手柄移除(文件，文件列表){
//移除图片
console.log(文件，文件列表)；
},
handlePictureCardPreview(文件){
//图片预览
这个。dialogimageurl=file。网址；
this.dialogVisible=true
},
beforeProductUpload(文件){
var _this=this
返回新承诺（功能（解决，拒绝){
var reader=new FileReader()
reader.readAsDataURL(file)//这里是最关键的一步，转换成base64
reader.onload=函数（事件){
_这个Form.imageurl.push(事件。目标。结果)//定义参数获取图片路径
}
})
},
提交(){
var form={
名字：这个Form.name，
imgdata:这个Form.imageurl，
价格：这个。形式。价格，
描述：这个。表单。描述
}
这个100美元axios。发布(/API/用户/添加产品，表单).然后(res={
console.log(res.data)
这个. $消息(发布成功)
这个. Form=
console.log(上传成功)
})
}
}
}
/脚本
定义一个imageurl数组来接收传入的image base64代码，然后将它传递给form对象中节点的后端，并将其保存在数据库中。这里我使用的是mongodb数据库，您可以看到数据已经被传递给了数据库。imgdata是存储图像base64的对象。
自那时以来，这一期已顺利完成。
总结
关于Vue如何通过使用Element-ui表单向后端发送数据和多张图片的文章到此结束。关于Vue使用Element-ui向后端发送数据的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。