vue+element-ui表单上传图片post方式

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_36706903/article/details/84853040

借鉴此文章:https://blog.csdn.net/fsfasgsfd/article/details/53121326(不过此文章js不支持jq,走过的坑)

笔记有段时间了,截图都被背叛了我,能意会的就意会一下,以此也记录一下自己的学习之路

本文是vue+element-ui+node.js+业务层分离,自己写的一些接口,若缺乏规范大家谨慎参考,可以留言告知我,会及时修改。

1、后台用的node.js,下载了三个模块,fs/path/formidable,

安装指令:

npm install fs --save-dev ,
npm install path --save-dev,
npm install formidable --save-dev

(安装后可以npm fs -v进行查询版本号,能查询到就继续下一步)

2、因为前台拦截上传,用到了跨域,这里用node.js的cors方法

把代码放到最前面也就是require引用的所有模块后面就可以咯,app.js引入上传路由地址以及使用。如下:(代码网上很多,根据项目要求设置)

具体代码:这里注意一个容易犯的错误,网上很多类似的代码:我这里去掉了Content-Type

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");//允许的请求方式类型
    res.header("X-Powered-By",' 3.2.1')
    next();
});

3、先上传路由route代码:(路由层、 controller层都是单独分开的文件)

const express = require('express');
const uploadRouter = express.Router();//express.Router类,创建模块化安装路径的处理程序。
const uploadController = require('./../controller/uploadController.js');//引用控制文件
//.route()函数,创建可链接的途径处理程序的路由路径。
uploadRouter.route('/uploadImage.do').post(uploadController.uploadImage);
//公开
module.exports = uploadRouter;

4、controller控制层代码:请求url :/uploadImage.do

 

//引用模块:
const formidable = require('formidable');
const path = require('path');
const fs = require('fs');
//详细处理上传图片的代码:
let user = {
    uploadImage:function (req,res) {
        let form = new formidable.IncomingForm();
        form.encoding = 'utf-8';//编码
        form.uploadDir = path.join(__dirname + "/../public/images/packImage");//可以修改为自己保存上传图片的文件地址,这里的关系看如下图片
        form.keepExtensions = true;//保留后缀
        form.maxFieldsSize = 2 * 1024 * 1024;//上传图片大小2m

        //处理图片
        form.parse(req, function (err, fields, files) {
            console.log(files.file.name);
            let filename = files.file.name//文件名字
            let nameArray = filename.split('.');//分割
            let type = nameArray[nameArray.length - 1];
            let name = '';
            for (let i = 0; i < nameArray.length - 1; i++) {
                name = name + nameArray[i];
            }
            let date = new Date();
            let time = '_' + date.getFullYear() + "_" + date.getMonth() + "_" + date.getDay() + "_" + date.getHours() + "_" + date.getMinutes();
            let avatarName = name + time + '.' + type;
            let newPath = form.uploadDir + "/" + avatarName;
            fs.renameSync(files.file.path, newPath);  //重命名
            console.log(avatarName);
            res.send({data: "/images/packImage/" + avatarName})// "/images/packImage/"写自己的保存上传图片的文件
        })
    }
}
module.exports = user;

 

接口代码到此为止,接下来是前台代码

5、前台vue,表单形式提交上传图片

<template>
 <!-- 弹出框 -->
        <el-dialog title="编辑" @click="close" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="包装编号" prop="PackingId">
                    <el-input type="text" v-model="form.PackingId" style="width: 100%;" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="包装名称" prop="PackingName">
                    <el-input v-model="form.PackingName"></el-input>
                </el-form-item>
                <el-form-item label="包装价格" prop="PackingPrice">
                    <el-input v-model="form.PackingPrice"></el-input>
                </el-form-item>
                <el-form-item label="图片上传" prop="PackingImage">
                        <el-upload
                            class="upload-demo"
                            action="http://localhost:9987/uploadImage.do"
                            :on-success="uploadSuccess"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList2"
                            list-type="picture"><!-- on-success是api里的上传成功的钩子;file-list是显示图片 -->
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                            </el-upload>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false,saveAddState=false,saveEditState=false">取 消</el-button>
                <el-button type="primary" v-if="saveEditState" @click="saveEdit">确 定</el-button>
                <el-button type="primary"  v-if="saveAddState" @click="saveAdd">添 加</el-button>
            </span>
        </el-dialog>
</template>

 

5.1、data和事件

<script>
    export default {
        name: 'pack',
        data() {
            return {
  uploadImageUrl:"",//存储上传图片返回的路径
                uploadImageName:"",//上传图片的名字
  fileList2: [],//存放需要显示的图片的名字和路径
}
},
methods: {
            //上传图片
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
//上传成功后获取到图片路径,并且把原本的图片名称传到后台去,需要拼接一下
            uploadSuccess(res, file, fileList){
               var name=file.name;
               var uploadImageFalseUrl=res.data.split("/");//获取图片原始路径 /images/packImage/2_2018_7_4_13_22.png         																				this.uploadImageUrl="/"+uploadImageFalseUrl[1]+"/"+uploadImageFalseUrl[2]+"/"+name;//拼接图片原本名字,真实传到后台的路径 res.data.split("/")[1]为images, res.data.split("/")[2]为packImage
            },
}
</script>

 

6、扩展1:最终上传图片路径展示:

6.1、获取图片路径:

uploadSuccess(res, file, fileList){ 
     console.log(res) 
}

 

手册解释:http://element-cn.eleme.io/#/zh-CN/component/upload#upload-shang-chuan

有三个参数,可以打印出来看看

on-success文件上传成功时的钩子function(response, file, fileList)

6.2、获取图片路径:(本来此处打印结果有截图,但是图片背叛了我。。。所以大家自己可以打印试试)

uploadSuccess(res, file, fileList){
 console.log(res.data) 
}

 

7、扩展2:上传图片成功怎样获得自己图片的名字:

//bug:图片名字最好拼接一下, 不然上传图片名字一样,这就。。。

uploadSuccess(res, file, fileList){
 console.log("file.name:"+file.name)
 }

代码得海洋有些深,我这还不会游泳,就带着游泳圈,还要带个打气筒,时不时打点气,不让自己沉下去。

希望通过我们得交流和学习,能够慢慢有艘船,在大海中航行,不用为了活下去而忽略海上得风景,其实慢慢成长我们会发现,大海,真是个神秘得地方。

学习使我们优秀,我们一起加油吧!

展开阅读全文

没有更多推荐了,返回首页