Vue菜鸟之路: 封装上传组件

末蓝、 2022-01-15 04:35 456阅读 0赞

[为什么80%的码农都做不了架构师？>>> ][80_]  ![hot3.png][]

# 前言 #

> 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 {
          }
        }

转载于:https://my.oschina.net/KelinM/blog/3055490

[80_]: https://my.oschina.net/u/2663968/blog/3051541
[hot3.png]: /images/20220115/e983578561314d63a87a9eaccc661e63.png