Vue uses components to upload pictures

Time:2021-2-19

When uploading files, you can use either the element component or the third-party component. I use imagecropper and pantthumb here

First, download two folders: link: https://pan.baidu.com/s/1BsE0VjoTj2p1jRpzvgkFvg Extraction code: 628i, and then drop these two folders into the component directory of Vue. After use, it looks like this. I feel OK

 

Stamp code of Vue:

change the avatar
        
        
        
      
      
        preservation

 

Script part code:
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
  //Components introduced by import need to be injected into objects to be used
  components: { ImageCropper, PanThumb },
  data () {
    //Data is stored here
    return {
      teacher: {
        name: '',
        avatar: ''
      },
      Savebtndisabled: false, // is the Save button disabled
      Imagecroppershow: false, // whether the upload pop-up component is displayed
      Imagecropperkey: 0, // upload component key value
      uploadOSSUrl:  process.env.BASE_ API + '/ eduoss / fileoss' // get the URL of the background upload OSS, here is the base_ The API itself changes to the address of the back-end call
    }
  },
     //Method collection
  methods: {
    //Close the upload avatar box
    close () {
      this.imagecropperShow = false
      //Initialize component on shutdown
      this.imagecropperKey = this.imagecropperKey + 1
    },
    //Upload success method, here will get the URL of the picture in OSS
    cropSuccess (data) {
      this.imagecropperShow = false
      this.teacher.avatar = data.url
      //Initialize components when uploading
      this.imagecropperKey = this.imagecropperKey + 1
    },
//Add and save, according to whether there is an ID to determine whether to add or modify
    saveOrUpdate () {
      //Here is to call Axios to save the data in the teacher object and define it yourself
    }  
  }}