Vue + Element 自定義上傳封面元件

尚尚是高尚的尚發表於2023-01-10
Vue元件

前一段時間做專案，頻繁使用到上傳圖片元件，而且只上傳一個封面，於是想著自定義一個圖片封面上傳元件。先來看一下效果：

                      
第一張圖片是上傳之前，第二張圖片是上傳成功後，第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>

點選上傳後的圖片上的放大鏡，顯示圖片大圖

 

 

 
 

相關文章