zoukankan      html  css  js  c++  java
  • vue2+express4图片上传

    vue2使用[vue-core-image-upload](https://github.com/Vanthink-UED/vue-core-image-upload/blob/master/README.md)插件提供组件。
    根据文档做相应的本地修改
    添加个人样式方便显示
    修改text显示按钮文字,提供一个upload请求地址,这里是本地搭建的express后台地址。
    <vue-core-image-upload v-bind:class="['borderme','pure-button-primary','js-btn-crop']" text="点击上传一个图片" v-bind:crop="false" url="http://127.0.0.1:3000/upload" extensions="png,gif,jpeg,jpg" v-on:click="imageuploaded"></vue-core-image-upload>
    引入模块名修改为-线

    import VueCoreImageUpload from 'vue-core-image-upload';
    //方法放在
    //methods里面
    methods:{
    imageuploaded:function(res) {
    if (res.errcode == 0) {
    }
    },
    }



    expres4环境
    使用formidable中间件。
    routes文件夹里创建upload.js文件
    配置app.js路由,使用commejs引入upload.js文件,var upload = require('./route/upload')
    配置路由app.use('upload')


    upload.js
    引入formidable模块,根据api写代码接收前端发来的请求

    router.post('/',(req,res,next)=>{
    // if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // parse a file upload
    var form = new formidable.IncomingForm();
    form.uploadDir = "./uploads";
    form.parse(req, function(err, fields, files) {
    res.writeHead(200, {'content-type': 'text/plain'});
    res.write('received upload:
    
    ');
    res.end(util.inspect({fields: fields, files: files}));
    });
    return;
    // }
    })


    前端上传之后会返回数据,文件会写入指定的uploadDir目录

  • 相关阅读:
    牛客小白月赛12 392B
    牛客392A 经典区间覆盖
    hihocoder contest95 1、3、4题目分析 2赛后补题
    hiho一下第234周《矩形计数》题目与解答
    Light oj 1306
    请访问我新的博客
    比特币“投资”记录-1
    如何清爽的使用网页版新浪微博
    Vuex/Vue 练手项目 在线汇率转换器
    重装macOS环境配置笔记
  • 原文地址:https://www.cnblogs.com/benu/p/6703789.html
Copyright © 2011-2022 走看看