图片上传与浏览 - 图1

    1. <template>
    2.   <div>
    3.     <el-upload class="uploader" :headers="authorToken" :action="UPLOAD_URL" :auto-upload="true"
    4.                :file-list="fileList" list-type="picture-card" :limit="limit?limit:9" :accept="fileType?fileType:'image/*'"
    5.                :on-success="handleGoodsImagesUploadSuccess" :before-upload="handlebeforeUpload" :multiple="true"
    6.                ref="fileupload" :on-exceed="handleUploadExceed" :on-remove="handleRemove"
    7.                :on-preview="handlePictureCardPreview">
    8.       <i class="el-icon-plus"></i>
    9.     </el-upload>
    10.     <el-dialog :append-to-body="true" :visible.sync="dialogImgVisible" style="z-index: 3000;text-align: center;"
    11.                :close-on-click-modal="false" :close-on-press-escape="false" custom-class="pub_dialog">
    12.       <img width="80%" :src="dialogImageUrl" alt="" />
    13.     </el-dialog>
    14.   </div>
    15. </template>
    16. <!--
    17.     使用用例
    18.     fileType可以是
    19.     audio/*表示“任何音频文件
    20.     video/*表示“任何视频文件
    21.     image/*表示“任何图像文件
    22.     还可以以逗号拼接，如image/*,.pdf
    23.     <multi-upload v-model="form.voucherUrlList" :fileType="image/*"></multi-upload>
    24.     import MultiUpload from '@/components/Upload/MultiUpload'
    25.     components: {
    26.         MultiUpload
    27.     },
    28. -->
    31. <script>
    32. // import {
    33. //     UPLOAD_URL
    34. // } from '../../utils/api.js';
    35. export default {
    36.   props: {
    37.     value: {
    38.       type: Array,
    39.       default: () => []
    40.     },
    41.     limit: {
    42.       type: Number,
    43.       default: 9
    44.     },
    45.     fileType: String,
    46.   },
    47.   data() {
    48.     return {
    49.       authorToken: {
    50.         'Authorization': 'Bearer ' + sessionStorage.getItem("token")
    51.       },
    52.       UPLOAD_URL: "/v1/admin/common/upload", // 上传的图片服务器地址 即上传图片后台接口的路径
    53.       loading: '',
    54.       param: {
    55.         token: ''
    56.       },
    57.       dialogImageUrl: "",
    58.       dialogImgVisible: false,
    59.       disabled: false,
    60.       imgs:[],
    61.       num:0,
    62.       fileNum:0
    63.     }
    64.   },
    65.   computed: {
    66.     // ['xxx', 'xxx'] 转换为 [{url: 'xxx'}, {url: 'xxx'}]
    67.     fileList() {
    68.       return this.value.map(url => ({
    69.         url
    70.       }))
    71.     }
    72.   },
    73.   methods: {
    74.     handlePictureCardPreview: function(file) {
    75.       this.dialogImageUrl = file.url;
    76.       this.dialogImgVisible = true;
    77.     },
    78.     handleRemove: function(file, fileList) {
    79.       // fileList 为删除后的文件列表
    80.       const value = fileList.map(v => v.url)
    81.       this.$emit('input', value)
    82.     },
    83.     handleGoodsImagesUploadSuccess(response, file, fileList) {
    84.       console.log(response);
    85.       console.log(fileList);
    87.       if (response.code == 200) {
    88.         let imageUrl = response.data;
    89.         this.imgs.push(imageUrl);
    90.         this.num++;
    91.         if(this.num == this.fileNum){
    92.           this.num = 0;
    93.           this.fileNum = 0;
    94.           // 这里如果 this.value.push(imageUrl) 这么写，vue会报出警告，大概意思是value作为props不应该在子组件中被修改
    95.           // 应该根据 value 得到新的值，而不能修改它，this.value.concat(imageUrl)也是可以的，concat方法返回新的数组
    96.           // this.$emit('input', [...this.value, imageUrl])
    97.           this.$emit('input', this.value.concat(this.imgs))
    98.           this.imgs =[];
    99.         }
    100.       } else {
    101.         this.$message.error(file.name + '上传失败!');
    102.       }
    103.     },
    104.     handlebeforeUpload(file) {
    105.       // 这里做可以做文件校验操作
    106.       const isImg = /^image\/\w+$/i.test(file.type)
    107.       if (!isImg && this.fileType == 'image/*') {
    108.         this.$message.error('只能上传 JPG、PNG、GIF 格式!')
    109.         return false
    110.       }
    111.       this.fileNum++;
    112.       console.log(this.fileNum);
    113.     },
    114.     handleUploadExceed() {
    115.       this.$message.error(`最多上传${this.limit}张图片`)
    116.     },
    117.   }
    118. }
    119. </script>
    120. <style>
    121.   /*去除upload组件过渡效果*/
    122.   .el-upload-list__item {
    123.     transition: none !important;
    124.   }
    125. </style>
    126. <style scoped lang="scss">
    129. .hide>>>.el-upload--picture-card {
    130.   display: none;
    131. }
    132. </style>