About vue-element-admin mining pit recording -upload component image upload problem

Personal blog use part of the image upload

It would need to use vue-element-admin in the upload component

First, we need to introduce upload component required to upload pictures of vue file and use the labels used in the form of the component binding properties by v-model image

<template>
  <div class="createPost-container">
    <Upload v-model="image"/>
  </div>
</template> 
​
<script>
    import Upload from '@/components/Upload/SingleImage3'
    
    export default {
        name: 'EssayDetail',
        components: {Upload},
        data() {
            image:''
        },
    }
</script>

　　

​

Such components can upload pictures to do for our function

Such pictures uploaded using the upload default upload, but it sucked inside do we upload documents into image base64 encoded

The result may be returned

data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAQTGF2YzU4LjI3LjEwMAD/2wBDAAgCAgICAgICAgICAgMDAwMDAwMDAwMDAwMDAwMEBAQDAwMDAwMDBAQEBAQEBAQEBAQEBAUFBQYGBQUHBwcICAr/xAD9AAEAAgMBAQEAAAAAAAAAAAAAAgEGBAMFBwgBAQEBAQEBAQEAAAAAAAAAAAABAgMEBQYHEAABAwMCAwUEBQYJBAoIDBcBAAIDBAUREgYhBzFBYVEIEyKBFHEyFaGR8DMjwUKxUlNykuHRYgkkFoIXVPElQ6JVpLLSNNQYtHRWczU34pVElNODY+Q2ZrV1J9W25cTFw8KT..........................(后面省略1万个字符)

　　

Base64 encoding or longer

Then so long a coding stored into the database, it is clear that such a long coding already over budget, although the database field ah can varchar, text, does not match this type longtext but already with our expectations, if such a long coded into the database apparently affect the query efficiency

That is the only way to modify the source code upload through this component

To Upload / SingleImage3 above, for example the introduction of open file SingleImage3.vue

<template>
  <div class="upload-container">
    <el-upload
      :data="dataObj"
      :multiple="false"
      :show-file-list="false"
      :on-success="handleImageSuccess"
      class="image-uploader"
      drag
      action="https://httpbin.org/post"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或<em>点击上传</em>
      </div>
    </el-upload>
    <div class="image-preview image-app-preview">
      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
        <img :src="imageUrl">
        <div class="image-preview-action">
          <I class = "EL-icon-Delete" @ the Click = "rmImage" /> 
        </ div> 
      </ div> 
    </ div> 
    <div class = "Image-preview"> 
      <div V-Show = "imageUrl. length>. 1 "class =" Image-preview-warpper "> 
        <IMG: the src =" imageUrl "> 
        <div class =" Image-preview-Action "> 
          <I class =" EL-icon-Delete "@ the Click =" rmImage "/> 
        </ div> 
      </ div> 
    </ div> 
  </ div> 
</ Template> 
seen action = by element-ui official document reading" https://httpbin.org/post "this property, which is a picture upload address, and bind the hook when the file upload success: on-success = "handleImageSuccess " 

then looks handleImageSuccess this method 

Export default { 
  name: 'SingleImageUpload3', 
  The props: {'SingleImageUpload3',
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tempUrl: '',
      dataObj: { token: '', key: '' }
    }
  },
  computed: {
    imageUrl() {
      return this.value
    }
  },
  methods: {
    rmImage() {
      this.emitInput('')
    },
    emitInput(val) {
      this.$emit('input', val)
    },
    handleImageSuccess(file) {
      this.emitInput(file.files.file)
    },
    beforeUpload() {
      const _self = this
      return new Promise((resolve, reject) => {
        getToken().then(response => {
          const key = response.data.qiniu_key
          const token = response.data.qiniu_token
          _self._data.dataObj.token = token
          _self._data.dataObj.key = key
          this.tempUrl = response.data.qiniu_url
          resolve(true)
        }).catch(err => {
          console.log(err)
          reject(false)
        })
      })
    }
  }
}

　　

In regard to on-success explanation elementUI official website is

parameter	Explanation	Types of	Optional value	Defaults
on-success	File upload hook when success	function(response, file, fileList)	—	—

handleImageSuccess function on-success bound only file this parameter, the function can then more obviously a response parameter

response is a successful upload callback, we can achieve a back-end interface to upload pictures to action attribute that to achieve our own picture upload interface returns a json

I back-end interface is defined / pic / upload background data is returned json data format, (according to its own definition of json structure)

{ 
    "Success": to true, 
    "code": 200, 
    "the Message": "Upload successful", 
    "the Data": "(a successful upload pictures address)" 
}

　　

And handleImageSuccess changed

handleImageSuccess(res, file) {
      this.emitInput(res.data)
}

　　

 

The method then calls the emitInput () method passing a value of this method has implemented this. $ Emit ( 'input', val)

vue EMIT regarding usage of $ 1, parent may use the data to the props subassembly. 2, sub-assemblies can use custom event triggers $ emit parent component.  

vm. $ emit (event, arg) // trigger event on the current instance

vm $ on (event, fn);. // fn monitor running event after event;

Vue specific use or learn it

Finally handleImageSuccess in this.emitInput(res.data)this statement

The final return is to upload the pictures and echo url for the picture on the upload component

 

step

1. Modify the action attribute to achieve their own interfaces, the definition of a good return json, json in the presence of the picture front-end to return to, the following response parameters to use

2. Add handleImageSuccess in response to this. $ Emit ( 'input' , val) modified to this.emitInput (res.data) res.data address as a picture 

3. Finish