前端vue怎么实现文件上传

本文前提是使用vue.js+element-ui结合，借用element-ui的upload上传附件组件来实现前端vue怎么上传附件（图片，Excel，视频等）

1、data.js中定义

export default{     init :function(){          return{                 fileList:[],                 token:{                    accessToken:''                 }           }     }}

2、xxx.vue中

<template>    <section>        <el-row>              <el-form-item>                  <el-upload                          class="upload-demo"                           action="http://192.168.400.56:9000/file/rest/common/uploadFilesClientByArray"                          :data='token'                         :on-change="handleChange"                          :on-remove="handleRemove"                          :file-list="fileList">                        <el-button size="small" type="primary">上传附件</el-button>                   </el-upload>                   </el-form-item>         </el-row>    </section></template><script>    import data from './data';    import methods from './method';    export default{        data() {              return data.init();         },        methods:methods    }</script><style></style>

注：1、接口接收accessToken的值放在请求头中，将上面的：data=”token” 改成：headers=”token”即可
2、action即为附件的上传接口的详细地址
3、data是传递参数的
4、fileList是上传回调的数据数组

3、method.js中

export default{    handleChange(file, fileList) {        this.fileList = fileList;         var ids=handleUpOrDel(fileList);      },      handleRemove(file, fileList){        this.fileList = fileList;          var ids=handleUpOrDel(fileList);    },    handleUpOrDel(fileList){       let ids="";       if(fileList){            for(var i =0; i < fileList.length; i++){                 console.log(fileList[i].response);                var obj = fileList[i].response;                 if(obj){                    if(obj.code){                         ids +=obj.record.successResponse[0].id;                         if(i < fileList.length - 1){                            ids +=",";                         }                    }                }            }         }        return ids;      }}

回调之后的结果如下图所示：