“上传图片”问题的解决

解决影院项目的图片上传问题

在上一篇博文中也说了，我们这个影院项目中有一个电影管理模块，这个模块中就牵扯到电影的海报上传的问题，下面我就分别针对前端和后台说下相应的处理：

前端部分

主要是借助FormData完成的，前端采用的是Vue，所以是下面的写法

            submit : function() {   
               var formData = new FormData();

                formData.append("path", document.getElementById("file").files[0]); 
                formData.append('movieName', this.movie.movieName);
                formData.append('movieType', $('.edit').find('select').eq(0).val());
                formData.append('movieSummary', this.movie.movieSummary);
                formData.append('movieDirector', this.movie.movieDirector);
                formData.append('movieActor', this.movie.movieActor);
                formData.append('movieLong', this.movie.movieLong);
                formData.append('movieLanguage', this.movie.movieLanguage);
                formData.append('price', this.movie.price);

                this.$http.post('/api/movie/add', formData)
                  .then((response) => {
                    if(response.data.error) {
                        $('#err').val("添加失败，请重试");
                    }else {
                        this.$router.push('/movie');
                    }                   
                });                             
            }

当时我在控制台输出这个FormData对象的实例的时候，一看到它出现是空的时候，我就有点紧张，以为没有取到值，如下面所示：

所以就重新定义了一个对象，并且输出：

var movie = {
    movieName : this.movie.movieName,
    movieType : $('.edit').find('select').eq(0).val(),
    movieSummary : this.movie.movieSummary,
    movieDirector: this.movie.movieDirector,
    movieActor:  this.movie.movieActor,
    movieLong : this.movie.movieLong,
    movieLanguage : this.movie.movieLanguage,
    price : this.movie.price,
};

console.log(movie);

输出结果，我看到之后，才知道没有错误，这才“放心大胆”的去专心处理后台的处理的

后台部分

我承认的一点就是我的Node.js没有达到那种熟练掌握各种模块的使用的地步，之前也没有用过Node写过文件上传的东西（之前用Java做后台的时候，倒是接触过这部分），所以我在后台的处理函数里面第一次尝试的是通过body-parser模块来处理前端发来的post请求，但是当我利用 req.body.** 输出的内容都是空的，那个时候的第一个反应还是担心数据没有传过来，然后又去查询了一下别人的博客和别人对于文件处理的方式，我就找到了formidable 这个东西，之前也没有用过，然后参考别人提供的例子，写出来关于添加电影的后台：

router.post('/api/movie/add', (req, res) => {
    var obj ={};
    var form = new formidable.IncomingForm({
        encoding:"utf-8",
        uploadDir:"../dist/resource",  //文件上传地址
        keepExtensions:true  //保留后缀
    });
    form.parse(req)
        .on('field', function(name, value) {  // 对于字段
            obj[name] = value;
        })
        .on('file', function(name, file) {  //对于文件
            obj[name] = file;
        })
        .on('error', function(error) {  

        })
        .on('end', function() {  //结束时候
             obj.path = obj.path.path.substring(1).split('\\').join('/').split('./dist/')[1];
             obj.state = 0;

             new models.Movies(obj).save((err, data) => {
                if(err) {
                    res.send({error : 'error'});
                } else {
                    res.send('addMovie successed');
                }       
             });             
        });
});

在写uploadDir这个路径的时候，改了好几次，原因就是刚开始时在写路径的时候，是放在static目录下的，然后之后在展示电影信息的时候没有加载出海报，原因就是webpack将存放在static目录下的东西都会打包到dist目录底下，而我写的vue页面也会打包到dist目录下的static目录下的，所以之后进行了调整，然后放在/dist/resource目录下，然后查看信息的时候显示正常。

扩展学习

关于formidable的安装

npm install formidable –save -d

npm 上对于formidable的介绍：https://www.npmjs.com/package/formidable

multiparty 也可以实现表单的解析功能

function multiparty (req,callback) {
    var form = new multiparty.Form({
        encoding:"utf-8",
        uploadDir:"../dist/resource",  //文件上传地址
        keepExtensions:true  //保留后缀
    })

    form.parse(req, function(err, fields, files) {
        var obj ={};
        Object.keys(fields).forEach(function(name) {   
            obj[name] = fields[name];
        });

        Object.keys(files).forEach(function(name) {
            obj[name] = files[name];
        });

        callback(err,obj);
    });
}

这个和formidable都是可以实现解析表单的功能的，但是它们返回值的数据结构和字段名称不同，另一方面关于它们的解析结果的呈现也不一样，multiparty 返回值是数组格式的

参考：http://www.cnblogs.com/wuwanyu/p/wuwanyu20160406.html