如何用elementui去实现图片上传和表单提交，用axios的post方法

一：之前写的老版本的elementui的版本是2.1.0，vue的版本是2.5.2

1.1下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容

<template>
    <el-row>
        <el-col :span="8" :offset="8">
            <div id="upload">
                <label class="el-form-item__label" style="width: 80px;">上传图片label>
                
                <el-upload
                  class="upload-demo"
                  :before-upload="beforeupload"
                  drag
                  action="https://jsonplaceholder.typicode.com/posts/"
                  style="margin-left:80px;">
                  <i class="el-icon-upload">i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传em>div>
                  
                el-upload>
                
                
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="活动名称">
                        <el-input v-model="form.name" name="names" style="width:360px;">el-input>
                    el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建el-button>
                        <el-button>取消el-button>
                    el-form-item>
                el-form>
            div>
        el-col>
        
        
        <el-col :span="4" >
            <div style="width:100%;overflow: hidden;margin-left:150px;">
                <img :src="src" alt="" style="width:100%;"/>
            div>
        el-col>
    el-row>
    
template>

<script>
    export default {
        data() {
            return {
                form: {//form里面的参数
                  name: ''
               },
               param:"",//表单要提交的参数
               src:"https://afp.alicdn.com/afp-creative/creative/u124884735/14945f2171400c10764ab8f3468470e4.jpg" //展示图片的地址
            };
        },
        methods: {
            beforeRemove(file, fileList) {
                //return this.$confirm(`确定移除 ${ file.name }？`);
            },
            //阻止upload的自己上传，进行再操作
            beforeupload(file) {
                console.log(file);
                //创建临时的路径来展示图片
                var windowURL = window.URL || window.webkitURL;
                
                this.src=windowURL.createObjectURL(file);
                //重新写一个表单上传的方法
                this.param = new FormData();
                this.param.append('file', file, file.name);
                return false;
            },
            //覆盖默认的上传行为
            httprequest() {

            },
            onSubmit(){//表单提交的事件
                var names = this.form.name;
                //下面append的东西就会到form表单数据的fields中；
                this.param.append('message', names);
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                //然后通过下面的方式把内容通过axios来传到后台
                //下面的this.$reqs 是在主js中通过Vue.prototype.$reqs = axios 来把axios赋给它;
                this.$reqs.post("/upload", this.param, config).then(function(result) {
                                console.log(result);
                })
            }
        }
    }
script>

 1.2通过上面的组件，在post中传输后，后台接受通过fomidable插件来处，这里用的是node，把图片和表单的数据保到数据库和本地的静态资源文件夹里面，如下面：

//这个是后台的routers文件夹下面的upload.js文件

var express = require('express');
var router = express.Router();
var handler = require('./dbhandler.js'); //封装的mongodb的增删改查和分页基本操作的文件；
var ObjectId = require('mongodb').ObjectId; //对mongo的_id处理的插件；
var formidable = require('formidable');
var fs = require("fs");


router.post("/",function(req,res,next){
    var form = new formidable.IncomingForm();
    //设置文件上传存放地址
    //form.uploadDir = "./public/images";
    //执行里面的回调函数的时候，表单已经全部接收完毕了。
    form.parse(req, function(err, fields, files) {
        console.log("files:",files)  //这里能获取到图片的信息
        console.log("fields:",fields) //这里能获取到传的参数的信息，如上面的message参数，可以通过fields。message来得到
        
    })
})


module.exports = router;

 二：现在加一个新版本的，带删除功能的，elementui的版本2.5.4，这个版本需要vue的版本最低是2.5.16

* 实现的思路前端方面主要是利用elementui的这个upload插件的 auto-upload=false  来阻止自动上传，然后利用onchange属性的回调函数的文件来获取图片上传给后台；

前端源码地址：https://github.com/13476075014/node-vue/blob/master/mynodeproject/01.classweb/vueclient/src/components/upload.vue

后端源码地址：https://github.com/13476075014/node-vue/blob/master/mynodeproject/01.classweb/server/routes/upload.js

 

2.1 基础的拖动效果的，样式如下图：

 

2.1.1 选中图片的效果

 

 

 

 

 2.1.2 前端代码

// upload.vue

    
第一种样式上传方法：
        
            

        
                
                    
                    
                

          上传图片
          
          

          upload
            class="upload-demo"
            :auto-upload=false
            :on-change="onchange"
            :on-remove="handleRemove"
            :limit=1
            drag
            action=""
            style="margin-left:80px;">
            
            
将文件拖到此处，或点击上传
            
这里只能上传一张,如需更换请先手动删除列表中的！
          
          
            立即创建
            取消
          
                
            
        

        
        
            

                
            
        
    

2.1.3 js部分的代码：

2.1.4 后台代码和最开始写的老板的一样

2.1.5 后台获取数据展示：

 

2.2图片列表样式效果，如下图

 

 2.2.1 选中图片的效果

2.2.2 前端代码

    
第二种样式上传方法：
        
            

        　　
            
                
                　　
            　　

          　　　
            　　
            　　upload
             　　 class="upload-demo"
              　　action=""
              　　:limit=1
              　　:auto-upload=false
              　　:on-change="onchange2"
              　　:on-remove="handleRemove2"
              　　:file-list="fileList2"
              　　list-type="picture">
              　　点击上传
              　　
            　
          　　
          　　
               立即创建
               取消
          　 
        　 
         
        
    

 

2.2.3 js代码

2.2.4  后端代码和上面一样

 

转载于:https://www.cnblogs.com/chun321/p/8690876.html