elementUI提供了照片牆上傳的功能，我們直接拿來用。
以下是實現代碼：
<template> <div style="padding: 50px;"> <el-form class="form-wrapper padding" ref="addForm" :model="addForm" :rules="addRules" label-width="110px"> <el-form-item label="活動圖片：" prop="photo"> <el-upload :action="base" multiple accept="image/png, image/jpeg" list-type="picture-card" :before-upload="beforeUploadPicture" :on-preview="handlePictureCardPreview" :on-progress="uploadProgress" :on-remove="handleRemove" :on-success="uploadSuccess" :on-error="uploadError" :show-file-list="true"> <i class="el-icon-plus"></i> </el-upload> </el-form-item> <el-form-item> <el-button type="primary" @click="addEnsure">保存</el-button> </el-form-item> </el-form> <el-dialog class="preview-modal" :visible.sync="imgVisible" append-to-body> <img width="100%" :src="dialogImageUrl" alt="photo"> </el-dialog> </div> </template> <script type="text/ecmascript-6"> import base from 'api/env' // 配置了圖片上傳接口地址的js文件 export default { data() { return { addForm: { photo: '' // 活動圖片 }, addRules: { // 表單驗證規則 photo: [{required: true, message: '請上傳活動圖片', trigger: 'blur'}] }, uploadComplete: true, // 圖片上傳完成狀態 base: base.imgURL + 'upload/img', imgVisible: false, // 上傳圖片預覽 dialogImageUrl: '' // 圖片預覽地址 } }, created() { this.initForm(); }, methods: { initForm() { if(this.$refs.addForm){ this.$refs.addForm.resetFields(); } }, // 上傳圖片前調用方法 beforeUploadPicture(file) { if(file.size > 10*1024*1024){ this.$message.error("上傳圖片不能大於10M"); return false; } }, // 上傳圖片時調用 uploadProgress(event,file, fileList){ this.uploadComplete = false; }, // 上傳圖片成功 uploadSuccess(res, file, fileList) {
this.uploadComplete = true; this.fileChange(fileList); }, // 上傳圖片出錯 uploadError(err, file, fileList) { this.$message.error("上傳出錯"); }, // 移除圖片 handleRemove(file, fileList) { this.fileChange(fileList); }, // 設置photo值 fileChange(fileList) { let temp_str = ''; if(fileList.length > 0){ for(let i=0; i<fileList.length; i++){ if(fileList[i].response){ if(fileList[i].response.code === 0){ if(i===0){ temp_str += fileList[i].response.data; } else { // 最終photo的格式是所有已上傳的圖片的url拼接的字符串（逗號隔開） temp_str += ',' + fileList[i].response.data; } } } } } this.addForm.photo = temp_str; }, // 圖片預覽 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.imgVisible = true; }, // 確認添加 addEnsure(){ if(!this.uploadComplete){ this.$message.error("圖片正在上傳，請稍等"); return; } this.$refs.addForm.validate((valid) => { if(valid){ let params = { photo: this.addForm.photo, }; console.info(params); // 調用接口... } else { this.$message.error("請填寫所有必填項"); } }); } } } </script>
效果圖：
上傳之后，我們可能會有編輯的情況，這里附上照片牆編輯時的初始化的代碼：（請注意editFiles）
<template> <div style="padding: 50px;"> <el-form class="form-wrapper padding" ref="editForm" :model="editForm" :rules="editRules" label-width="110px"> <el-form-item label="活動圖片：" prop="photo"> <el-upload :action="base" multiple accept="image/png, image/jpeg" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-progress="uploadProgress" :on-success="uploadSuccess" :on-error="uploadError" :file-list="editFiles" :show-file-list="true"> <i class="el-icon-plus"></i> </el-upload> </el-form-item> <el-form-item> <el-button type="primary" @click="editEnsure">保存</el-button> </el-form-item> </el-form> <el-dialog class="preview-modal" :visible.sync="imgVisible" append-to-body> <img width="100%" :src="dialogImageUrl" alt="photo"> </el-dialog> </div> </template> <script type="text/ecmascript-6"> import base from 'api/env' // 配置了圖片上傳接口地址的js文件 export default { data() { return { editForm: { // 編輯表單 photo: '' // 活動圖片 }, editRules: { // 表單驗證規則 photo: [{required: true, message: '請上傳活動圖片', trigger: 'blur'}] }, editFiles: [],// 編輯時已上傳圖片初始化 uploadComplete: true, base: base.imgURL + 'upload/img', imgVisible: false, // 上傳圖片預覽 dialogImageUrl: '' // 圖片預覽地址 } }, created() { this.initInfo(); }, methods: { // 編輯 initInfo() { this.editForm = { id: 1, photo: '' }; // 這里photo應從服務器獲取，存儲的是數組，請按照相應格式獲取圖片url（這里直接給值） let temp = [ {id: 123, photo: 'http://img4.imgtn.bdimg.com/it/u=2011641246,1136238184&fm=27&gp=0.jpg'}, {id: 124, photo: 'http://img2.imgtn.bdimg.com/it/u=302701032,2300144492&fm=27&gp=0.jpg'} ]; if(temp.length > 0){ for(let t=0; t<temp.length; t++){ //通過[{name: 'name', url: 'url地址'}]格式初始化照片牆 this.editFiles.push({name: 'name' + temp[t].id, url: temp[t].photo}); if(t===0){ this.editForm.photo += temp[t].photo } else { // 最終photo的格式是所有已上傳的圖片的url拼接的字符串（逗號隔開），根據實際需要修改格式 this.editForm.photo += ',' + temp[t].photo; } } } this.editVisible = true; }, // 確認修改 editEnsure() { if(!this.uploadComplete){ this.$message.error("圖片正在上傳，請稍等"); return; } console.info(this.editForm.photo); // 調用接口... }, // 上傳圖片前調用方法 beforeUploadPicture(file) { if(file.size > 10*1024*1024){ this.$message.error("上傳圖片不能大於10M"); return false; } }, // 上傳圖片時調用 uploadProgress(event,file, fileList){ this.uploadComplete = false; }, // 上傳圖片成功 uploadSuccess(res, file, fileList) {
this.uploadComplete = true; this.fileChange(fileList); }, // 上傳圖片出錯 uploadError(err, file, fileList) { this.$message.error("上傳出錯"); }, // 移除圖片 handleRemove(file, fileList) { this.fileChange(fileList); }, // 設置photo值 fileChange(fileList) { let temp_str = ''; if(fileList.length > 0){ for(let i=0; i<fileList.length; i++){ if(fileList[i].response){ if(fileList[i].response.code === 0){ if(i===0){ temp_str += fileList[i].response.data; } else { temp_str += ',' + fileList[i].response.data; } } } else if(fileList[i].status && fileList[i].status === 'success'){ if(i===0){ temp_str += fileList[i].url; } else { temp_str += ',' + fileList[i].url; } } } } this.editForm.photo = temp_str; }, // 圖片預覽 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.imgVisible = true; } } } </script>
初始化后的效果就是這樣：
接下來就可以繼續愉快地上傳圖片啦。