09 element-ui完成文件上传

1、前提约束

• 完成nodejs，vue-cli，webpack，webpack-dev-server的安装
  https://www.jianshu.com/p/eb4d9e132f62
• 提供一个后台api可以完成文件上传
  https://www.jianshu.com/p/2262beb31378
  假设提供文件上传的api路径为：POST http://localhost:8088/filesystem/upload

2、操作步骤

• 使用脚手架创建一个vue项目模板并启动成功，假设项目名称为vue-element
  https://www.jianshu.com/p/644eb12a8174
• 下载element-ui的js包

cd vue-element
cnpm install element-ui --save-dev

• 修改src/main.js

import ElementUI from 'element-ui'
Vue.use(ElementUI)

• 修改config/index.js

  proxyTable: {
      '/api/filesystem': {//文件系统管理
        target: 'http://localhost:8088',
        pathRewrite: {
          '^/api': ''
        }
      }
    },

• 修改HelloWorld.vue

<template>
  <div>
    <el-upload
      action="/api/filesystem/upload"
      list-type="picture-card"
      :before-upload="setuploaddata"
      :on-success="handleSuccess"
      :file-list="fileList"
      :limit="picmax"
      :on-exceed="rejectupload"
      :before-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        picmax:1,//最大上传文件的数量
        courseid:'',
        dialogImageUrl: '',
        dialogVisible: false,
        fileList:[],
        imgUrl:''
      }
    },
    methods: {
      //超出文件上传个数提示信息
      rejectupload(){
        this.$message.error("最多上传"+this.picmax+"个图片");
      },
      //在上传前设置上传请求的数据
      setuploaddata(){

      },
      //删除图片
      handleRemove(file, fileList) {

      },
      //上传成功的钩子方法
      handleSuccess(response, file, fileList){

      },
      //上传失败执行的钩子方法
      handleError(err, file, fileList){
        this.$message.error('上传失败');
        //清空文件队列
        this.fileList = []
      }
    },
    mounted(){

    }
  }
</script>
<style>

</style>

• 启动，按页面提示执行，就能看到上传文件效果。
  以上就是通过element-ui完成文件上传的过程。