Vue + Element 自定义上传封面组件

前一段时间做项目，频繁使用到上传图片组件，而且只上传一个封面，于是想着自定义一个图片封面上传组件。先来看一下效果：

                      

第一张图片是上传之前，第二张图片是上传成功后，第3张图片是鼠标放上去之后的效果！

 

首先整理需求，图片上传我们使用照片墙的方式，只能上传一张图片，图片上传成功后不能继续上传，如果想要更换图片，则需要将图片删除后重新上传。点击图片上面的放大镜可以查看大图。

需要限制图片上传的格式，图片的大小。

 

组件代码：

  1 <template>
  2   <div class="upload">
  3     <el-upload
  4       :class="{'hidden':mFileList.length > 0}"
  5       list-type="picture-card"
  6       :on-remove="handleRemove"
  7       :action="action"
  8       :before-upload="beforeUploadHandle"
  9       :on-success="successHandle"
 10       :on-change="changeHandle"
 11       :limit="1"
 12       :accept="accept"
 13       :on-exceed="handleExceed"
 14       :file-list="fileList"
 15       :on-preview="handlePictureCardPreview"
 16     >
 17       <i class="el-icon-plus"></i>
 18     </el-upload>
 19     <el-dialog :visible.sync="dialogVisible">
 20       <img width="100%" :src="dialogImageUrl" alt="" />
 21     </el-dialog>
 22   </div>
 23 </template>
 24
 25 <script>
 26 export default {
 27   props: {
 28     action: {
 29       type: String,
 30       default: "",
 31     },
 32     accept: {
 33       type: String,
 34       default: "",
 35     },
 36     fileList:{
 37       type: Array,
 38       default: () => [],
 39     },
 40   },
 41   watch: {
 42     fileList(newValue, oldValue) {
 43       this.mFileList = newValue
 44     }
 45   },
 46   data() {
 47     return {
 48       dialogVisible: false, //图片放大
 49       fileImg: "", //上传图片
 50       dialogImageUrl: "", //图片地址
 51       mFileList:this.fileList,
 52     };
 53   },
 54   methods: {
 55     handleRemove(file, fileList) {
 56       this.$emit("upload-remove", file);
 57     },
 58     handlePictureCardPreview(file) {
 59       this.dialogImageUrl = file.url;
 60       this.dialogVisible = true;
 61     },
 62     // 上传之前
 63     beforeUploadHandle(file) {
 64       if (file.type !== "image/jpeg" && file.type !== "image/png") {
 65         this.$message({
 66           message: "只支持jpg、png格式的图片！",
 67           type: "warning",
 68         });
 69         return false;
 70       }
 71       const isLt2M = file.size / 1024 / 1024 < 2;
 72       if (!isLt2M) {
 73         this.$message({
 74           message: "上传文件大小不能超过 2MB!",
 75           type: "warning",
 76         });
 77         return false;
 78       }
 79     },
 80     // 上传成功
 81     successHandle(response, file, fileList) {
 82       this.mFileList = fileList;
 83       if (response && response.code === 200) {
 84         this.$message.success("图片上传成功！");
 85         this.$emit("upload-success", response, file);
 86       } else {
 87         this.$message.error(response.msg);
 88       }
 89     },
 90     changeHandle(file, fileList) {
 91       if(file.response && file.response.code == 500) {
 92          this.$emit("upload-error",file);
 93       }
 94     },
 95     handleExceed(files, fileList) {
 96         this.$message.warning("只能上传1张图片！");
 97       },
 98   },
 99 };
100 </script>
101 <style lang="scss">
102 .upload .hidden .el-upload--picture-card {
103   display: none;
104 }
105 </style>

调用组件代码：

 1 <template>
 2     <div>
 3         <el-form ref="dataForm"    label-width="80px">
 4             <el-form-item label="封面" prop="cover" class="is-required">
 5                 <upload list-type="picture-card" :action="url" :accept="'.jpg,.png,.JPG,.PNG'" :fileList="fileList"
 6                     :limit="1" @upload-success="uploadFile" @upload-remove="removeFile" @upload-error="uploadError">
 7                 </upload>
 8             </el-form-item>
 9         </el-form>
10     </div>
11 </template>
12
13 <script>
14     import Upload from '../components/cover-upload/index.vue'
15     export default {
16         components: {
17             Upload
18         },
19         data() {
20             return {
21                 url: "",
22                 fileList: [],
23             }
24         },
25         methods: {
26             uploadUrl() {
27                 this.url = "http://xxx.xxx.xxx.xxx:xxx/yyxt/admin/course/courseInfo/upload?token=075de0303b15a38833a30a7a3b494794"//上传图片的后台接口
28             },
29             uploadError(file) {
30                 this.fileList = [];
31             },
32             uploadFile(response, file) {
33                 this.fileList = [{
34                     url: response.data,
35                 }, ];
36             },
37             removeFile(file) {
38                 this.fileList = [];
39             },
40         },
41         mounted() {
42             this.uploadUrl();
43         }
44     }
45 </script>

点击上传后的图片上的放大镜，显示图片大图