使用input框上传文件。

转载学习自：https://www.cnblogs.com/conglvse/p/9524452.html

整个

vue组件文件：

template部分：

   

       

           

       

           

               

                   

                       

                           

                                创客马拉松最终展示

                           

                               

                           

                                最终展示

                           

                                仔细填写以下信息，注意格式，务必要填写真实准确的信息，*为必填项，一旦确认提交审核，则无法修改。

                           

                               

                                   

                                           

                                                *

                                                团队信息表

                                               

                                                   

(文件格式为：.doc,.docx)

                                                   

                                                       

•                                                            

  {{ item.name }}

  

•                                                            

                                                             

  点击上传

                                     

                                             

                                                  *

                                                  项目简介表

                                                 

                                                     

  (文件格式为：.doc,.docx)

                                                     

                                                         

                                                             

  {{ item.name }}

  

                                                             

                                                             

  点击上传

                                     

                                             

                                                  *

                                                  实物照片

                                                 

                                                     

  (建议图片格式为：JPEG/BMP/PNG，大小不超过5M)

                                                     

                                                         

  •                                                            

    ×

                                                           

  •                                                            

                                                               

    点击上传

                               

                                   

                               

                                    提交审核

    script  js部分：

        export default {

    name:"malathionResultShow",

            data() {

    return {

    //第一个团队信息表

                    formData:new FormData(),

                    teamTable: [],

                    // 第二个项目简介表

                    formDataProject:new FormData(),

                    projectTable: [],

                    // 第三个实物照片

                    formDataMaterial:new FormData(),

                    imgsMaterial: {},

                    imgLenMaterial:0,

                }

    },

            methods: {

    //上传文件的方法

                addFile(num){

    //第一个上传文件的方法

                    if(num ===0){

    let inputDOM =this.$refs.inputer;

                        // 通过DOM取文件数据

                        this.fil = inputDOM.files;

                        this.teamTable =this.fil;

                        console.log(this.fil);

                        console.log(this.fil[0].name);

                        console.log(this.projectTable);

                    }else if(num ===1){

    let inputDOM =this.$refs.inputerProject;

                        // 通过DOM取文件数据

                        this.fil = inputDOM.files;

                        this.projectTable =this.fil;

                        console.log(this.fil);

                        console.log(this.fil[0].name);

                        console.log(this.projectTable);

                    }else if(num ===2){

    // 第三个添加图片的

                        let inputDOM =this.$refs.inputerMaterial;

                        // 通过DOM取文件数据

                        this.fil = inputDOM.files;

                        let oldLen=this.imgsMaterial;

                        let len=this.fil.length+oldLen;

                        if(len>20){

    alert('最多可上传20张，您还可以上传'+(20-oldLen)+'张');

                            return false;

                        }

    for (let i=0; i

    let size = Math.floor(this.fil[i].size /1024);

                            if (size >5*1024*1024) {

    alert('请选择5M以内的图片！');

                                return false

                            }

    this.imgLenMaterial++;

                            this.$set(this.imgsMaterial,this.fil[i].name+'?'+new Date().getTime()+i,this.fil[i]);

                        }

    }

    },

                getObjectURL(file) {

    var url =null ;

                    if (window.createObjectURL!=undefined) {// basic

                        url = window.createObjectURL(file);

                    }else if (window.URL!=undefined) {// mozilla(firefox)

                        url = window.URL.createObjectURL(file);

                    }else if (window.webkitURL!=undefined) {// webkit or chrome

                        url = window.webkitURL.createObjectURL(file);

                    }

    return url;

                },

                delImg(key,num){

    if(num ===0){

    this.$delete(this.imgs,key);

                        this.imgLen--;

                    }else if(num ===1){

    this.$delete(this.imgsProject,key);

                        this.imgLenProject--;

                    }else if(num ===2){

    this.$delete(this.imgsMaterial,key);

                        this.imgLenMaterial--;

                    }

    },

                    // 提交图片的方法

    // submit(){

    //    for(let key in this.imgs){

    //        let name=key.split('?')[0];

    //        this.formData.append('multipartFiles',this.imgs[key],name);

    //    }

    //    this.$http.post('/opinion/feedback', this.formData,{

    //        headers: {'Content-Type': 'multipart/form-data'}

    //    }).then(res => {

    //        this.alertShow=true;

    //    });

    // },

            },

            mounted() {

    }

    }