template部分

  1. <div v-show="!!pickPictures[0]" class="pickPictures">
  2.     <div v-for="(item, index) in pickPictures" :key="index" class="pickItem">
  3.     <div class="pickTop" @click="previewImg">
  4.         <img class="img" :src="item" />
  5.     </div>
  6.     <div class="pickBtn font28 fontGray" @click="removeTap(index)">删除</div>
  7.     </div>
  8. </div>
  9. <div v-show="pickPictures.length < 4" class="upPic">
  10.     <div class="upPicIcon" @click="upImgTap">
  11.         <img class="img" src="../assets/images/camera.png" />
  12.     </div>
  13.     <input
  14.     accept="image/*"
  15.     type="file"
  16.     max="1"
  17.     style="display: none"
  18.     ref="inputer"
  19.     @change="changeImg"
  20.     />
  21. </div>

script部分

  1. export default {
  2.   name: "PictureForm",
  3.   data() {
  4.     return {
  5.       pickPictures: [],
  6.     };
  7.   },
  8.   methods: {
  9.     upImgTap() {
  10.       let target = this.$refs.inputer;
  11.       target.click();
  12.     },
  13.     changeImg() {
  14.       if (this.pickPictures.length > 5) {
  15.         Toast("最多上传5张图片!");
  16.         return;
  17.       }
  18.       let inputDOM = this.$refs.inputer;
  19.       let files = inputDOM.files;
  20.       this.uploadImage(files[0]);
  21.     },
  22.     uploadImage(file) {
  23.       let form = new FormData();
  24.       form.append("file", file);
  25.       config.axios.post(config.upload_async, form).then(res => {
  26.         console.log(res);
  27.         if (res.status == 200 && res.data.code == 0) {
  28.           this.pickPictures.push(res.data.data);
  29.         } else {
  30.           Toast("图片上传错误");
  31.           return;
  32.         }
  33.       });
  34.     },
  35.     removeTap(index) {
  36.       let tempList = this.pickPictures;
  37.       remove(tempList, index);
  38.       this.pickPictures = tempList;
  39.     },
  40.     getObjectURL(file) {
  41.       var url = null;
  42.       if (window.createObjectURL != undefined) {
  43.         url = window.createObjectURL(file);
  44.       } else if (window.URL != undefined) {
  45.         url = window.URL.createObjectURL(file);
  46.       } else if (window.webkitURL != undefined) {
  47.         url = window.webkitURL.createObjectURL(file);
  48.       }
  49.       return url;
  50.     },
  51.   }
  52. };

style部分

  1. .pickPictures {
  2.   width: 100%;
  3.   height: 33.3vw;
  4.   box-sizing: border-box;
  5.   padding: 0 4.8vw;
  6.   display: flex;
  7.   justify-content: flex-start;
  8.   align-items: center;
  9.   border-bottom: 1px solid #d1d1d1;
  10. }
  11. .pickItem {
  12.   margin-right: 2.67vw;
  13.   width: 16vw;
  14.   height: 25.3vw;
  15.   display: flex;
  16.   flex-direction: column;
  17.   justify-content: space-between;
  18.   align-items: center;
  19. }
  20. .pickTop {
  21.   width: 15.7vw;
  22.   height: 15.7vw;
  23.   border: 1px solid #e2e2e2;
  24.   border-radius: 1.3vw;
  25.   overflow: hidden;
  26. }
  27. .pickBtn {
  28.   width: 15.7vw;
  29.   height: 6vw;
  30.   border: 1px solid #e2e2e2;
  31.   border-radius: 0.67vw;
  32.   line-height: 6vw;
  33.   text-align: center;
  34. }
  35. .upPic {
  36.   width: 100%;
  37.   height: 25.6vw;
  38.   box-sizing: border-box;
  39.   padding: 0 4.8vw;
  40.   display: flex;
  41.   justify-content: space-between;
  42.   align-items: center;
  43.   border-bottom: 1px solid #d1d1d1;
  44. }
  45. .upPicIcon {
  46.   width: 16vw;
  47.   height: 16vw;
  48. }
  49. .upPicTip {
  50.   width: 70.6vw;
  51.   line-height: 5.86vw;
  52. }