element ui upload上传图片组件

• 引入组件

  1 <upload-img :profile-url="shopProfile" @getShopProfileFn="getShopProfile" />

• 定义方法

   getShopProfile(url) {
       //  url 
      },

• 组件内容

   1 <template>
   2   <div>
   3     <el-upload
   4       list-type="picture-card"
   5       :action="action"
   6       :auto-upload="true"
   7       :data="uploadData"
   8       name="file"
   9       :show-file-list="true"
  10       :on-success="handleSuccess"
  11       :before-upload="beforeUpload"
  12       :on-exceed="handleExceed"
  13       accept="image/png, image/jpeg, image/gif, image/jpg"
  14       :limit="1"
  15     >
  16       <i slot="default" class="el-icon-plus"></i>
  17       <div slot="file" slot-scope="{file}">
  18         <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
  19         <span class="el-upload-list__item-actions">
  20           <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
  21             <i class="el-icon-zoom-in"></i>
  22           </span>
  23           <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
  24             <i class="el-icon-delete"></i>
  25           </span>
  26         </span>
  27       </div>
  28     </el-upload>
  29     <el-dialog :visible.sync="dialogVisible">
  30       <img width="100%" :src="dialogImageUrl" alt />
  31     </el-dialog>
  32   </div>
  33 </template>
  34 <script>
  35 export default {
  36   data() {
  37     return {
  38       action: "",
  39       disabled: false,
  40       uploadData: {
  41         file: "",
  42         project: ""
  43       },
  44       imageUrl: "",
  45       dialogImageUrl: "",
  46       dialogVisible: false,
  47       disabled: false
  48     };
  49   },
  50   props: {
  51     profileUrl: {
  52       type: String,
  53       default: ""
  54     }
  55   },
  56   methods: {
  57     handleRemove(file) {
  58       // console.log(file);
  59     },
  60     handlePictureCardPreview(file) {
  61       this.dialogImageUrl = file.url;
  62       this.dialogVisible = true;
  63     },
  64     beforeUpload(file) {
  65       this.uploadData.file = file;
  66       const isLt2M = file.size / 1024 / 1024 < 2;
  67       if (!isLt2M) {
  68         this.$message.error("上传头像图片大小不能超过 2MB!");
  69         return isLt2M;
  70       }
  71     },
  72     // 上传成功后，但存在不保存情况
  73     handleSuccess(res, file) {
  74       // this.imageUrl = URL.createObjectURL(file.raw);
  75       // 获取后端对上传图片存储位置的路径，
  76       if (res.code === 200) {
  77         this.imageUrl = res.url;
  78         this.$emit("getShopProfileFn", this.imageUrl);
  79       } else {
  80         this.$message.error("图片上传失败");
  81       }
  82     },
  83     handleExceed(files, fileList) {
  84       this.$message.error("只能上传一张图片");
  85     }
  86   }
  87 };
  88 </script>