|  | @@ -1,124 +1,128 @@
 | 
	
		
			
				|  |  |  <template>
 | 
	
		
			
				|  |  | -    <div>
 | 
	
		
			
				|  |  | -        <van-uploader
 | 
	
		
			
				|  |  | -          ref="uploader"
 | 
	
		
			
				|  |  | -          v-bind="$attrs"
 | 
	
		
			
				|  |  | -          v-model="fileList"
 | 
	
		
			
				|  |  | -          :before-read="beforeRead"
 | 
	
		
			
				|  |  | -          :after-read="afterRead"
 | 
	
		
			
				|  |  | -          :max-count="maxCount"
 | 
	
		
			
				|  |  | -          :max-size="maxSize * 1024*1024"/>
 | 
	
		
			
				|  |  | -    </div>
 | 
	
		
			
				|  |  | +  <div>
 | 
	
		
			
				|  |  | +    <van-uploader
 | 
	
		
			
				|  |  | +      ref="uploader"
 | 
	
		
			
				|  |  | +      v-bind="$attrs"
 | 
	
		
			
				|  |  | +      v-model="fileList"
 | 
	
		
			
				|  |  | +      :before-read="beforeRead"
 | 
	
		
			
				|  |  | +      :after-read="afterRead"
 | 
	
		
			
				|  |  | +      :max-count="maxCount"
 | 
	
		
			
				|  |  | +      @delete="deleteHandler"
 | 
	
		
			
				|  |  | +      :max-size="maxSize * 1024 * 1024"
 | 
	
		
			
				|  |  | +    />
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  |  </template>
 | 
	
		
			
				|  |  |  <script>
 | 
	
		
			
				|  |  | -import {upload} from "@/api/public";
 | 
	
		
			
				|  |  | -import ImageCompressor from "js-image-compressor";
 | 
	
		
			
				|  |  | -import config from '@/config/index';
 | 
	
		
			
				|  |  | +import { upload } from '@/api/public'
 | 
	
		
			
				|  |  | +import ImageCompressor from 'js-image-compressor'
 | 
	
		
			
				|  |  | +import config from '@/config/index'
 | 
	
		
			
				|  |  |  export default {
 | 
	
		
			
				|  |  | -    props:{
 | 
	
		
			
				|  |  | -      value:{
 | 
	
		
			
				|  |  | -        type: Array,
 | 
	
		
			
				|  |  | -      },
 | 
	
		
			
				|  |  | -      //最大上传数量
 | 
	
		
			
				|  |  | -      maxCount:{
 | 
	
		
			
				|  |  | -        type: Number,
 | 
	
		
			
				|  |  | -        default: 6,
 | 
	
		
			
				|  |  | -      },
 | 
	
		
			
				|  |  | -      //文件大小,单位MB
 | 
	
		
			
				|  |  | -      maxSize:{
 | 
	
		
			
				|  |  | -        type: Number,
 | 
	
		
			
				|  |  | -        default: 5,
 | 
	
		
			
				|  |  | -      },
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | +  props: {
 | 
	
		
			
				|  |  | +    value: {
 | 
	
		
			
				|  |  | +      type: Array
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    data() {
 | 
	
		
			
				|  |  | -      return {
 | 
	
		
			
				|  |  | -        fileList:[],
 | 
	
		
			
				|  |  | -        //上传之后的图片列表,双向绑定之后覆盖fileList
 | 
	
		
			
				|  |  | -        imageList:[]
 | 
	
		
			
				|  |  | -      };
 | 
	
		
			
				|  |  | +    //最大上传数量
 | 
	
		
			
				|  |  | +    maxCount: {
 | 
	
		
			
				|  |  | +      type: Number,
 | 
	
		
			
				|  |  | +      default: 6
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | +    //文件大小,单位MB
 | 
	
		
			
				|  |  | +    maxSize: {
 | 
	
		
			
				|  |  | +      type: Number,
 | 
	
		
			
				|  |  | +      default: 5
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  data() {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      fileList: [],
 | 
	
		
			
				|  |  | +      //上传之后的图片列表,双向绑定之后覆盖fileList
 | 
	
		
			
				|  |  | +      imageList: []
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    mounted() {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    watch:{
 | 
	
		
			
				|  |  | -      value:{
 | 
	
		
			
				|  |  | -        handler(val){
 | 
	
		
			
				|  |  | -          this.fileList = val.map(v=>{
 | 
	
		
			
				|  |  | -            console.log( window.origin ,' window.origin ')
 | 
	
		
			
				|  |  | -            let imgUrl =
 | 
	
		
			
				|  |  | -              process.env.NODE_ENV === "development"
 | 
	
		
			
				|  |  | -                ?  config.baseUrl + v.imgPath
 | 
	
		
			
				|  |  | -                : window.origin + v.imgPath;
 | 
	
		
			
				|  |  | -            return {
 | 
	
		
			
				|  |  | -              name: v.name,
 | 
	
		
			
				|  |  | -              url:  imgUrl,
 | 
	
		
			
				|  |  | -              path:v.imgPath,
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -          })
 | 
	
		
			
				|  |  | -          
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        deep:true,
 | 
	
		
			
				|  |  | -        immediate:true
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    methods: {
 | 
	
		
			
				|  |  | -      //上传前压缩
 | 
	
		
			
				|  |  | -      beforeRead(file){
 | 
	
		
			
				|  |  | -        console.log(file,'图片压缩前')
 | 
	
		
			
				|  |  | -        return new Promise((resolve, reject) => {
 | 
	
		
			
				|  |  | -            new ImageCompressor({
 | 
	
		
			
				|  |  | -              file,
 | 
	
		
			
				|  |  | -              quality: 0.6,
 | 
	
		
			
				|  |  | -              success: (result) => {
 | 
	
		
			
				|  |  | -                //this.$toast('图片压缩成功')
 | 
	
		
			
				|  |  | -                console.log(result,'图片压缩后')
 | 
	
		
			
				|  |  | -                let imgFile = new File([result], result.name, {
 | 
	
		
			
				|  |  | -                  width: result.width,
 | 
	
		
			
				|  |  | -                  height: result.height,
 | 
	
		
			
				|  |  | -                  type: result.type,
 | 
	
		
			
				|  |  | -                });
 | 
	
		
			
				|  |  | -                console.log(imgFile,'后')
 | 
	
		
			
				|  |  | -                resolve(imgFile);
 | 
	
		
			
				|  |  | -              },
 | 
	
		
			
				|  |  | -              error: (e) => {
 | 
	
		
			
				|  |  | -                console.log('imageError:'+e);
 | 
	
		
			
				|  |  | -                this.$toast('图片压缩失败')
 | 
	
		
			
				|  |  | -                reject(e);
 | 
	
		
			
				|  |  | -              },
 | 
	
		
			
				|  |  | -             });
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | +  mounted() {},
 | 
	
		
			
				|  |  | +  watch: {
 | 
	
		
			
				|  |  | +    value: {
 | 
	
		
			
				|  |  | +      handler(val) {
 | 
	
		
			
				|  |  | +        this.fileList = val.map(v => {
 | 
	
		
			
				|  |  | +          console.log(window.origin, ' window.origin ')
 | 
	
		
			
				|  |  | +          let imgUrl = process.env.NODE_ENV === 'development' ? config.baseUrl + v.imgPath : window.origin + v.imgPath
 | 
	
		
			
				|  |  | +          return {
 | 
	
		
			
				|  |  | +            name: v.name,
 | 
	
		
			
				|  |  | +            url: imgUrl,
 | 
	
		
			
				|  |  | +            path: v.imgPath
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  |        },
 | 
	
		
			
				|  |  | -      //上传到服务器
 | 
	
		
			
				|  |  | -      afterRead(fileObj){
 | 
	
		
			
				|  |  | -        let formData = new FormData();
 | 
	
		
			
				|  |  | -        formData.append("file", fileObj.file);
 | 
	
		
			
				|  |  | -        upload(formData, "image").then((res) => {
 | 
	
		
			
				|  |  | +      deep: true,
 | 
	
		
			
				|  |  | +      immediate: true
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    //上传前压缩
 | 
	
		
			
				|  |  | +    beforeRead(file) {
 | 
	
		
			
				|  |  | +      console.log(file, '图片压缩前')
 | 
	
		
			
				|  |  | +      return new Promise((resolve, reject) => {
 | 
	
		
			
				|  |  | +        new ImageCompressor({
 | 
	
		
			
				|  |  | +          file,
 | 
	
		
			
				|  |  | +          quality: 0.6,
 | 
	
		
			
				|  |  | +          success: result => {
 | 
	
		
			
				|  |  | +            //this.$toast('图片压缩成功')
 | 
	
		
			
				|  |  | +            console.log(result, '图片压缩后')
 | 
	
		
			
				|  |  | +            let imgFile = new File([result], result.name, {
 | 
	
		
			
				|  |  | +              width: result.width,
 | 
	
		
			
				|  |  | +              height: result.height,
 | 
	
		
			
				|  |  | +              type: result.type
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +            console.log(imgFile, '后')
 | 
	
		
			
				|  |  | +            resolve(imgFile)
 | 
	
		
			
				|  |  | +          },
 | 
	
		
			
				|  |  | +          error: e => {
 | 
	
		
			
				|  |  | +            console.log('imageError:' + e)
 | 
	
		
			
				|  |  | +            this.$toast('图片压缩失败')
 | 
	
		
			
				|  |  | +            reject(e)
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    //上传到服务器
 | 
	
		
			
				|  |  | +    afterRead(fileObj) {
 | 
	
		
			
				|  |  | +      let formData = new FormData()
 | 
	
		
			
				|  |  | +      formData.append('file', fileObj.file)
 | 
	
		
			
				|  |  | +      upload(formData, 'image')
 | 
	
		
			
				|  |  | +        .then(res => {
 | 
	
		
			
				|  |  |            /*上传成功*/
 | 
	
		
			
				|  |  |            let imgUrl =
 | 
	
		
			
				|  |  | -            process.env.NODE_ENV === "development"
 | 
	
		
			
				|  |  | -              ?  config.baseUrl + res.data.url
 | 
	
		
			
				|  |  | -              : window.origin + res.data.url;
 | 
	
		
			
				|  |  | -          this.imageList.push({ name: res.data.name, url: imgUrl,imgPath:res.data.url});
 | 
	
		
			
				|  |  | -          this.$emit("input",this.imageList);
 | 
	
		
			
				|  |  | -        }).catch((err) => {
 | 
	
		
			
				|  |  | +            process.env.NODE_ENV === 'development' ? config.baseUrl + res.data.url : window.origin + res.data.url
 | 
	
		
			
				|  |  | +          this.deleteHandler()
 | 
	
		
			
				|  |  | +          // this.$emit("input",this.imageList);
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +        .catch(err => {
 | 
	
		
			
				|  |  |            /*上传失败*/
 | 
	
		
			
				|  |  | -          console.log(this.fileList,'this.fileList')
 | 
	
		
			
				|  |  | +          console.log(this.fileList, 'this.fileList')
 | 
	
		
			
				|  |  |            this.$toast.fail('上传失败')
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -      },
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    model:{
 | 
	
		
			
				|  |  | -      prop:'value',
 | 
	
		
			
				|  |  | -      event:'input'
 | 
	
		
			
				|  |  | +    //删除
 | 
	
		
			
				|  |  | +    deleteHandler() {
 | 
	
		
			
				|  |  | +      this.imageList = this.fileList
 | 
	
		
			
				|  |  | +      this.imageList.forEach(item => {
 | 
	
		
			
				|  |  | +        item.imgPath = item.path
 | 
	
		
			
				|  |  | +        delete item.path
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +      this.$emit('input',this.imageList)
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | -};
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  model: {
 | 
	
		
			
				|  |  | +    prop: 'value',
 | 
	
		
			
				|  |  | +    event: 'input'
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  |  </script>
 | 
	
		
			
				|  |  |  <style lang="scss" scoped>
 | 
	
		
			
				|  |  | -  .upload-text{
 | 
	
		
			
				|  |  | -    font-size: 18px;
 | 
	
		
			
				|  |  | -    color: #999;
 | 
	
		
			
				|  |  | -    margin-top: 5px;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | +.upload-text {
 | 
	
		
			
				|  |  | +  font-size: 18px;
 | 
	
		
			
				|  |  | +  color: #999;
 | 
	
		
			
				|  |  | +  margin-top: 5px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  |  </style>
 |