vue 封装组件之上传图片组件(el-upload)

效果图：

1.上传前

2.上传后 

 

 代码实现

1.在components文件夹里自定义文件名称ImageUpload

以上代码可以直接粘贴使用，但是对于这两行代码需要根据自己的项目实际情况来写

import authToken from "../../util/auth";

  uploadImgUrl: "", // 上传的图片服务器地址
  headers: {
        Authorization: this.$store.state.auth.token.password,
      },

2.如果上传图片，项目里面使用次数很多，你可以全局引入，在main.js里引入

import imageUpload from "./components/ImageUpload";
Vue.component('imageUpload',imageUpload)

3.如果使用次数不多你可以在你所需页面进行引入

import imageUpload from "../../../components/ImageUpload";
export default {
components:{
     imageUpload
  },
}

注：2和3选其一即可

4.在自己所需要图片上传的页面

HTML

以上代码就能实现上传图片的功能，并且对新增里面的上传图片和修改里面的上传图片的回显都起作用，代码根据自己的项目进行更改使用即可