Vue 上传OSS多图片组件上传

  1 <template>
  2   <div class="about-copyright">
  3     <div class="about-title">{{ title }}</div>
  4     <div class="about-content">
  5       <p>请详细说明您的问题和意见（必填)</p>
  6       <div class="textContent">
  7         <textarea
  8           rows="5"
  9           cols="100"
 10           class="textarea"
 11           placeholder="请输入您的问题和意见，不超过200个字"
 12           maxlength="200"
 13           v-model="textarea"
 14         ></textarea>
 15         <i>{{textarea.length}}/200</i>
 16       </div>
 17       <p class="question">上传相关问题截图或图片(最多6张)</p>
 18       <!-- 上传图片 -->
 19       <el-upload
 20         ref='upload'
 21         :action="uploadFile.action"
 22         list-type="picture-card"
 23         :limit="6"
 24         :on-preview="handlePictureCardPreview"
 25         :before-upload="beforeAvatarUpload"
 26         :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: "", //上传的路径
 59         options: {}, //签名的返回值
 60         url: "" //上传之后生成的url
 61       },
 62       editImageUrl: "",
 63       fileList: [],
 64       imagesString:[],
 65       SSOTOKEN:this.$factory.getcookiesInClient('token'), 
 66     };
 67   },
 68   methods: {
 69     onSelectImage() {
 70       const options = {
 71         token:this.SSOTOKEN,
 72         clientType: 'pc',
 73         context: this.textarea,
 74         images: this.imagesString,
 75         distinguishability: '1024*768',
 76         equipmentVersion: navigator.userAgent
 77       };
 78       this.$dialogBox({
 79                 title:"提示",
 80                 msg:"提交成功，感谢您对行家的支持", 
 81                 left_butnName:"确定",
 82                 right_butnName:"取消",
 83                 checkBtn:false,
 84                 callback: () => {
 85                    this.$fetch("getAboutAgreenBack", options).then(res => {
 86                       console.log(res, '输出回到数据');
 87                       this.$Message.success("提交成功!");
 88                       this.textarea = "";
 89                       this.$refs.upload.clearFiles();
 90                     });
 91                 },
 92             })
 93       
 94     },
 95     handleAvatarSuccess(response, file, fileList) {
 96       console.log("成功的回调", fileList);
 97       this.fileList = fileList;
 98       this.imagesString = this.fileList.map(item => {
 99         return item.url
100       })
101       this.imagesString = this.imagesString.join();
102       console.log(this.imagesString, '获取图片的数组')
103       this.editImageUrl = this.uploadFile.url;
104     },
105     async beforeAvatarUpload(file) {
106       console.log("执行回调");
107       const typeList = ["image/jpeg","image/png", "image/bmp" , "image/jpg"] 
108       const isJPG =typeList.includes(file.type)
109       const isLt2M = file.size / 1024 / 1024 < 5;
110 
111       if (!isJPG) {
112         this.$Message.error("上传头像图片只能是 JPG/JPEG/PNG/BMP 格式!");
113       }
114       if (!isLt2M) {
115         this.$Message.error("上传头像图片大小不能超过 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>