前言

vue的菜鸟学习之路,从封装一个简单的上传组件开始,菜鸟摸索,大佬轻喷..(不服可以来写Java ....当我没说)

设计

1. 利用vue的父子组件传递来实现通用上传组件
2. 通过axios来实现图片的异步上传
3. 图片上传组件支持图片上传/预览/修改/删除,todo 支持进度条
4. 由于vue的组件传递机制(只能由父->子,无法子->父),提供图片上传后的回掉机制

实现

代码

Talk is cheap,show me the code

<template>
  <div class="controls">
    <input type="file" @change="uploadPic($event)" class="form-control-file" maxlength="250">
    <input type="hidden" :id="imageId" v-model="image">
    <div class="img_preview" v-if="(image && id) || uploadFlag">
      <button class="ui mini blue button" @click="remove" v-if="removeBtn">删除</button>
      <img :src="image">
    </div>
  </div>
</template>

<script>
import Config from "../config/config.js";
import layer from "layui-layer";
import axios from "axios";

export default {
  props: {
    image: {
      type: String,
      required: false
    },
    id: {
      type: Number,
      required: false
    },
    removeBtn: {
      type: Boolean,
      required: false,
      default: false
    },
    imageId: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      uploadFlag: false
    };
  },
  methods: {
    remove() {
      this.$emit("complete", {
        url: "",
        imageId: this.imageId
      });
      this.uploadFlag = false;
    },
    uploadPic(e) {
      let file = e.target.files[0];

      if (file == null || file == "undefined" || file.name === "undefined") {
        return true;
      }
      console.log("size:" + file.size);
      if (file.size > 1024 * 200) {
        layer.alert("图片大于200k,请重新选择");
        return;
      }
      let param = new FormData(); //创建form对象
      param.append("file", file, file.name); //通过append向form对象添加数据
      param.append("type", "RESOURCE");

      console.log(Config.baseUploadUrl);
      let resultUrl;
      let index = layer.load();

      axios
        .post(Config.baseUploadUrl + "/api/v2/upload", param)
        .then(res => {
          layer.close(index);
          layer.msg("图片上传成功", {
            time: 1000,
            icon: 1
          });
          this.$emit("complete", {
            url: res.data.url,
            imageId: this.imageId
          });
          this.uploadFlag = true;
          console.log(res);
        })
        .catch(error => {
          console.log(error);
          layer.alert("图片上传失败" + data, {
            icon: 2
          });
        });
    }
  }
};
</script>

1. 父组件通过image和id字段传递图片model的属性,通过id和image来判断是否编辑的预览
2. 上传组件通过axios formData形式异步上传图片,成功后通过[$emit] 来回调调用方的方法,这里回调方法定为complete,返回传递进来的imageId唯一标示和图片url
3. 限制图片大小和是否删除按钮可通过配置参数传递,目前暂只支持删除按钮配置,图片大小hardcode...todo

调用示例

组件集成

 <upload-div
          :image="data.imageUrl"
          :id="data.id"
          imageId="imageUrl"
          @complete="uploadComplete"
        ></upload-div>

组件回调

vue的methods方法绑定uploadComplete

uploadComplete: function(obj) {
      console.log(obj);
      if (obj.imageId === "imageUrl") {
        this.data.imageUrl = obj.url;
      } else if (obj.imageId === "shareIcon") {
        this.data.shareIcon = obj.url;
      } else {
      }
    }