当前位置:   article > 正文

Vue使用Element-ui表单发送数据和多张图片到后端_vue的table上传

vue的table上传

在做项目的时候遇到一个问题,前端需要上传表单到后端,表单数据包括文本内容和图片,后端我用的是Nodejs,效果类似下图

前端需要向后端传商品名称,价格,描述,商品图片

前端准备,利用Element-ui中的表单功能和上传功能,将upload代码嵌套在表单中,代码如下

  1. <template>
  2. <div class="content">
  3. <div class="form">
  4. <el-form ref="form" :model="Form" label-width="80px">
  5. <el-form-item label="商品名称">
  6. <el-input v-model="Form.name"></el-input>
  7. </el-form-item>
  8. <el-form-item label="商品价格">
  9. <el-input v-model="Form.price"></el-input>
  10. </el-form-item>
  11. <el-form-item label="商品描述">
  12. <el-input v-model="Form.description"></el-input>
  13. </el-form-item>
  14. <el-form-item>
  15. <el-upload
  16. action="/api/users/addProduct"
  17. list-type="picture-card"
  18. :on-preview="handlePictureCardPreview"
  19. :on-remove="handleRemove"
  20. :before-upload="beforeProductUpload">
  21. <i class="el-icon-plus"></i>
  22. </el-upload>
  23. <el-dialog :visible.sync="dialogVisible">
  24. <img width="100%" :src="dialogImageUrl" alt="">
  25. </el-dialog>
  26. </el-form-item>
  27. <el-form-item>
  28. <el-button type="primary" @click="submit">立即创建</el-button>
  29. <el-button>取消</el-button>
  30. </el-form-item>
  31. </el-form>
  32. </div>
  33. </div>
  34. </template>

需要注意的是,upload中的action传的是对应的后端接口

 

在上传图片前,需要先将图片转成base64格式的字符串后再上传给后端,这里定义了 beforeProductUpload函数进行转码处理

  1. beforeProductUpload(file){
  2. var _this = this
  3. return new Promise(function(resolve, reject) {
  4. var reader = new FileReader()
  5. reader.readAsDataURL(file)// 这里是最关键的一步,转换成base64
  6. reader.onload = function(event) {
  7. _this.Form.imageurl.push(event.target.result) //定义参数获取图片路径
  8. }
  9. })

script部分的代码

  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. Form: {
  6. name:'',
  7. imageurl:[],
  8. price:'',
  9. description:''
  10. },
  11. dialogImageUrl: '',
  12. dialogVisible: false
  13. };
  14. },
  15. methods: {
  16. handleRemove(file, fileList) {
  17. //移除图片
  18. console.log(file, fileList);
  19. },
  20. handlePictureCardPreview(file) {
  21. //图片预览
  22. this.dialogImageUrl = file.url;
  23. this.dialogVisible = true;
  24. },
  25. beforeProductUpload(file){
  26. var _this = this
  27. return new Promise(function(resolve, reject) {
  28. var reader = new FileReader()
  29. reader.readAsDataURL(file)// 这里是最关键的一步,转换成base64
  30. reader.onload = function(event) {
  31. _this.Form.imageurl.push(event.target.result) //定义参数获取图片路径
  32. }
  33. })
  34. },
  35. submit(){
  36. var form = {
  37. name:this.Form.name,
  38. imgdata: this.Form.imageurl,
  39. price:this.Form.price,
  40. description:this.Form.description
  41. }
  42. this.$axios.post('/api/users/addProduct',form).then(res=>{
  43. console.log(res.data)
  44. this.$message('发布成功')
  45. this.Form = ''
  46. console.log('上传成功')
  47. })
  48. }
  49. }
  50. }
  51. </script>

定义一个imageurl数组来接收传入的图片base64码,然后在保存在form对象中传过去给Node后端保存到数据库中,这里我用的是mongodb数据库,可以看到数据已经传到数据库了,imgdata就是存放图片base64的对象。

 自此已成功完成该问题,第一次发博客,多多包涵

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/280026?site
推荐阅读
相关标签