. 1 <Template> 2 <div class = "About-Copyright"> . 3 <div class = "About-title"> {{title}} </ div> . 4 <div class = "About-Content"> . 5 <P> Please specify your questions and comments (required) </ the p-> 6 <div class = "textContent"> 7 < the TextArea 8 rows = "5" 9 cols = "100" 10 class = "the TextArea" 11 placeholder = " Please enter your questions and comments, no more than 200 words " 12 maxlength =" 200 " 13 v-model="textarea" 14 ></textarea> 15 <I> textarea.length {{}} / 200 is </ I> 16 </ div> . 17 <P class = "Question"> problem shots or uploaded image (up to six) </ P> 18 is <! - Photo -> . 19 <EL- Upload 20 is REF = 'Upload' 21 is : Action = "uploadFile.action" 22 is List-type = "Card-picture" 23 is : limit = ". 6" 24 : ON-preview = "handlePictureCardPreview " 25 : Upload-before =" beforeAvatarUpload " 26 is : ON-Success =" handleAvatarSuccess " 27 : data="uploadFile.data" 28 > 29 <i class="el-icon-plus" style="margin-top:10px;"> 30 <br/> 31 <i style="font-size:12px;">支持jpg、jpeg、png、bmp格式，不要超过5M</i> 32 </i> 33 </el-upload> 34 <el-dialog :visible.sync="dialogVisible" size="tiny"> 35 <img width="100%" :src="dialogImageUrl" alt> 36 </el-dialog> 37 <div class="content-footer"> 38 <button class="button" @click="onSelectImage">提交</button> 39 </div> 40 </div> 41 </div> 42 </template> 43 44 45 <script> 46 export default { 47 name: "about-copyright", 48 components: {}, 49 data() { 50 return { 51 title: "意见反馈", 52 textarea: "", 53 dialogImageUrl: "", 54 dialogVisible: false, 55 activeNames: 0, 56 noteList: [], 57 uploadFile: { 58 action: "", //Upload path 59 Options: {}, // signed return value 60 URL: "" // generated after upload URL 61 is }, 62 is editImageUrl: "" , 63 is the fileList: [], 64 imagesString: [], 65 SSOToken : the this $ factory.getcookiesInClient ( 'token'. ), 66 }; 67 }, 68 Methods: { 69 onSelectImage () { 70 const Options = { 71 is token: the this .SSOTOKEN, 72 clientType: 'PC' , 73 is context: the this .textarea, 74 Images: the this .imagesString, 75 distinguishability: '1024 * 768' , 76 equipmentVersion: the navigator.userAgent 77 }; 78 the this . $ DialogBox ({ 79 title: "Tips " , 80 msg:" submitted successfully, thank you for your support of experts " , 81 left_butnName:" OK " , 82 right_butnName:" cancel " , 83 checkBtn:to false , 84 the callback: () => { 85 the this . $ FETCH ( "getAboutAgreenBack", Options) .then (RES => { 86 the console.log (RES, 'back to the data output' ); 87 the this $ the Message.. success ( "submitted successfully!" ); 88 the this .textarea = "" ; 89 the this . refs.upload.clearFiles $ (); 90 }); 91 is }, 92 }) 93 94 }, 95 handleAvatarSuccess (Response, File, the fileList) { 96 console.log ( "successful callback" , the fileList); 97 the this .fileList = the fileList; 98 the this .imagesString = the this .fileList.map (Item => { 99 return item.url 100 }) 101 the this .imagesString = the this . imagesString.join (); 102 the console.log ( the this .imagesString, 'acquired image array' ) 103 the this .editImageUrl = the this .uploadFile.url; 104 }, 105 the async beforeAvatarUpload (File) { 106 console.log ( "callback" ); 107 const typelist = [ "Image / JPEG", "Image / PNG", "Image / BMP", "Image / JPG" ] 108 const = isJPG typeList.includes (file.type ) 109 const = file.size isLt2M / 1024/1024 <. 5 ; 110 111 IF (! isJPG) { 112 the this $ Message.Error An ( "upload an avatar image only JPG / JPEG / PNG / BMP format!." ); 113 } 114 IF (! isLt2M) { 115 the this . Message.Error An $ ( "upload an avatar image size can not exceed 5MB!" ); 116 } 117 if (isJPG && isLt2M) { 118 // console.log('s',file) 119 const res = await this.fsSignature(file); 120 let data = res.data; 121 this.uploadFile.options = { ...data }; 122 this.uploadFile.action = data.host; 123 this.uploadFile.data = { 124 name: this.uploadFile.options.url.split("/").slice(-1), 125 key: 126 this.uploadFile.options.dir + 127 this.uploadFile.options.url.split("/").slice(-1), 128 policy: this.uploadFile.options.policy, 129 OSSAccessKeyId: this.uploadFile.options.accessid, 130 success_action_status: "200", 131 callback: this.uploadFile.options.callback, 132 signature: this.uploadFile.options.signature 133 }; 134 this.uploadFile.url = this.uploadFile.options.url; 135 this.uploadFile = Object.assign({}, this.uploadFile); 136 console.log("1", this.uploadFile); 137 return true; 138 } else { 139 return false; 140 } 141 }, 142 fsSignature(file) { 143 let userInfo = JSON.parse(localStorage.getItem("userInfo")); 144 let test = file.name.split("."); 145 let key = 146 userInfo.uid + "-" + test[0] + "-" + file.lastModified + "." + test[1]; 147 return this.$axios({ 148 url: "https://hq-storage.hqjy.com/api/signMapLog/expert", 149 method: "post", 150 header: { 151 Accept: "application/json, text/plain, */*", 152 "Content-Type": "application/json;charset=UTF-8", 153 userToken: this.$factory.getcookiesInClient("token") 154 }, 155 data: { 156 dir: "hangjiaPC-notice/image", 157 key 158 } 159 }); 160 }, 161 handlePictureCardPreview(file) { 162 this.dialogImageUrl = file.url; 163 this.dialogVisible = true; 164 }, 165 } 166 }; 167 </script> 168 169 <style lang="scss" scoped> 170 @import "../../assets/css/varibale"; 171 .about-copyright { 172 width: 100%; 173 .about-content /deep/ { 174 width: 100%; 175 .question { 176 margin-bottom: 10px; 177 } 178 .textContent { 179 position: relative; 180 .textarea { 181 border: 1px solid #ccc; 182 padding: 10px; 183 margin: 10px 0; 184 } 185 .textarea:hover { 186 border: 1px solid #FC3F4C; 187 } 188 i { 189 position: absolute; 190 right: 88px; 191 bottom: 20px; 192 } 193 } 194 195 img { 196 max-width: 100%; 197 } 198 button { 199 display: inline-block; 200 line-height: 1; 201 white-space: nowrap; 202 cursor: pointer; 203 background: #409eff; 204 border: 1px solid #dcdfe6; 205 color: #fff; 206 -webkit-appearance: none; 207 text-align: center; 208 -webkit-box-sizing: border-box; 209 box-sizing: border-box; 210 outline: 0; 211 margin: 0; 212 -webkit-transition: 0.1s; 213 -o-transition: 0.1s; 214 transition: 0.1s; 215 font-weight: 500; 216 padding: 12px 20px; 217 font-size: 14px; 218 border-radius: 4px; 219 } 220 .content-footer { 221 display: flex; 222 justify-content: center; 223 } 224 .avatar-uploader-icon { 225 font-size: 28px; 226 color: #8c939d; 227 width: 108px; 228 height: 108px; 229 // line-height: 108px; 230 line-height: 1.42; 231 font-size: 12px; 232 color: #6b7580; 233 display: inline-block; 234 text-align: center; 235 background-color: #f5f7fa; 236 .uploader-icon { 237 margin-top: 10px; 238 font-size: 22px; 239 } 240 } 241 } 242 } 243 </style>