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>
原文:https://www.cnblogs.com/janet11/p/12102431.html